AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

wel1

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量341

点赞数

分类专栏： WEB 文章标签： ajax

本文链接：https://blog.csdn.net/xingzhishen/article/details/77785352

版权

WEB 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、 Introduction

Asynchronous Javascript And XML，异步JavaScript和XML，是创建交互式网页应用的网页开发技术，不是新的编程语言。AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在异步请求中，请求由浏览器发出，js帮助启动发出这个请求，一般的浏览器都自带ajax引擎实现。Jquery作为js的一个框架，同样可以帮助实现ajax。一般，采用这两种方式的ajax。

二、 Js的ajax

实现ajax的步骤

1. 创建XMLHttpRequest对象

XMLHttpRequest对象是ajax的基础，用于在后台与服务器交换数据。对于可能不支持的老版本的IE5和IE6浏览器，需要创建ActiveXObject来实现ajax。

      var xmlHttpR;

      if(window.XMLRequest){

         xmlHttpR=new XMLHttpRequest;

      }else{

         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

2. 向服务器发送请求和获取响应

1) 使用XMLHttpRequest对象的open()和send()方法，可以向服务器发送请求。

语法格式：

xmlHttpR.open(“GET”,”${root}/testAjax”,true);

xmlHttpR.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

2) GET与POST的对比：

使用情况

发送数据的语法，方式

GET

GET方式简单而且更快，在不是必须要使用post方式的情况下都可以使用。

直接在url中添加信息。如：

Haha?id=${item.id}

POST

1．无法使用缓存文件

2．向服务器发送大量数据

3．发送包含未知字符的用户输入，post方式更稳定可靠。

xmlHttpR.send(“name=haha&sex=1”);

3) 使用XMLHttpRequest获得请求被处理的状态信息

由于请求发出后，如果是异步与服务器交互的，则服务器的执行和反馈响应与浏览器的其他后继操作是异步的，一般服务器的响应会比较慢，而浏览器的后继操作相对较快，如果浏览器的后继操作需要使用到服务器的响应数据，但是服务器的响应数据还没有准备就绪，则错过服务器响应。为了解决这个问题，需要使用XMLHttpRequest对象的准备状态方面的属性。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

4) 服务器响应

使用XMLHttpRequest对象的responseText（获得字符串形式的响应）和responseXML（获得xml形式的响应）属性，获得响应。

5) 例子：

GET方式

Jsp页面

<body>

   <div>

      <inputtype="button"onclick="testajax()"value="testAJAX"/>

   </div>

</body>

   <script>

      var xmlHttpR;

      function getXMLHttpRequest(){

         if(window.XMLHttpRequest){

            xmlHttpR=new XMLHttpRequest;

         }else{

            xmlHttpR=new ActiveXObject("Microsoft.XMLHTTP");

         }

         return xmlHttpR;

      }

      function testajax(){

         xmlHttpR=getXMLHttpRequest();

         xmlHttpR.open("GET","${root}/testAjax?name=haha",true);

         xmlHttpR.send();

         xmlHttpR.onreadystatechange=function(){

            if(xmlHttpR.readyState==4&&xmlHttpR.status==200){

                var res=xmlHttpR.responseText;

                alert(res);

            }

         }

      }

   </script>

</html>

处理ajax的Servlet

   protected voiddoGet(HttpServletRequest request, HttpServletResponseresponse) throwsServletException, IOException {

      String name=request.getParameter("name");

      System.out.println(name);

      response.setContentType("html/text;charset=utf-8");

      response.getWriter().write("获得ajax请求，返回成功");

   }

POST方式

主要在jsp页面的不同，post方式多了设置请求头的操作。

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

主要差别：

      function testajax(){

         xmlHttpR=getXMLHttpRequest();

         //xmlHttpR.open("GET","${root}/testAjax?name=haha",true);

         xmlHttpR.open("POST","${root}/testAjax",true);

         xmlHttpR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

         xmlHttpR.send("name=post&&sex=1");

         xmlHttpR.onreadystatechange=function(){

            if(xmlHttpR.readyState==4&&xmlHttpR.status==200){

                var res=xmlHttpR.responseText;

                alert(res);

            }

         }

      }

三、 Ajax传输json形式的数据

JSON，JavaScriptObjectNotation，javascript对象表示法，是存储和交换文本信息的语法。它类似xml，但是更小、更快、更易解析，是轻量级的文本数据交换格式。Json独立于编程语言，json解析器和json库支持许多不同的编程语言。Javascript能够使用内建的eval()函数，用json数据生成原生的js对象。

1. Json语法

数据以键值对表示；一对数据由逗号分隔；大括号保存对象；中括号保存数组。

如：{”name”:”haha”,”sex”:1}，[{”name”:”haha”,”sex”:”1”},{”name”:”haha”,”sex”:”1”},{”name”:”haha”,”sex”:”1”}]。

2. Json的值的类型：数字（正数或浮点数），字符串（在双引号中），逻辑值（true或false）,数组（在中括号中），对象（在大括号中），null。

如：{“age”:20}，{“name”:null}，{“hah”:true}，{“info”: [{”name”:”haha”,”sex”:”1”},{”name”:”haha”,”sex”:”1”},{”name”:”haha”,”sex”:”1”}]}。

3. Javascript中可以直接使用json形式为js对象赋值。

当js对象的值为json对象时，语法格式为：对象名称.键名；

当js对象为json数组时，语法格式为：对象名称[json数组中要调用的对象的索引（从0开始）]键名。

另外，也可以使用javascript的内置函数JSON.parse()将json形式的字符串解析为js对象，使用json数据的语法同上。

例子：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

</head>

<body>

   <div>

      <inputtype="button"onclick="testjson1()"value="testJSON1"/><br />

      <inputtype="button"onclick="testjson2()"value="testJSON2"/><br />

      <inputtype="button"onclick="testjson3()"value="testJSON3"/><br />

      <inputtype="button"onclick="testjson4()"value="testJSON4"/><br />

   </div>

</body>

   <script>

      function testjson1(){

         var hah={"name":"json1","sex":"1"};

         alert(hah.name);

      }

      function testjson2(){

         var hah=[{"name":"json21","sex":"1"},{"name":"json22","sex":"1"},{"name":"json23","sex":"1"}];

         for(var i=0;i<hah.length;i++){

            alert(hah.length);

            alert(hah[i].name);

         }

      }

      function testjson3(){

         var hah='{"name":"json3","sex":"1"}';

         var hhh=JSON.parse(hah);

         alert(hhh.name);

      }

      function testjson4(){

         var hah='[{"name":"json41","sex":"1"},{"name":"json42","sex":"1"},{"name":"json43","sex":"1"}]';

         var hhh=JSON.parse(hah);

         alert(hah.length);

         for(var i=0;i<hhh.length;i++){

            alert(hhh.length);

            alert(hhh[i].name);

         }

         //js的增强for循环

         for(indexin hhh){

            alert(2);

            alert(hhh[index].name);

         }

      }

   </script>

</html>

4. 在servlet中将内容以json形式响应

没有使用相关框架支持的情况下，如springMVC，需要导入flexjson的jar包。

综合案例：

使用ssm框架结合ajax用json传值的方式实现省市县3级联动的效果。

搭建ssm开发环境略

Controller层

@Controller

@RequestMapping("/haha")

public class ProvinceCon {

   @Autowired

   private ProvinceServiceprovinceService;

   @RequestMapping("/showPage")

   public String showPage(){

      return "province";

   }

   @RequestMapping("/setProvince")

   @ResponseBody

   public List<Province> setProvince(@RequestBody Provinceprovince){

      List<Province> plist=provinceService.getContent(province);

      System.out.println(province);

      System.out.println(plist);

      QueryVO qv=new QueryVO();

      qv.setPlist(plist);

      return plist;

   }

}

Service层

public interface ProvinceService {

   List<Province> getContent(Province province);

}

@Service

public class ProvinceServlceImple implements ProvinceService{

   @Autowired

   private ProvinceMapperprovinceMapper;

   @Override

   public List<Province> getContent(Provinceprovince) {

      List<Province> plist=provinceMapper.getContent(province);

      return plist;

   }

}

Dao层采用映射sql动态代理方式

import com.json.province.pojo.Province;

@Repository

public interface ProvinceMapper {

   public List<Province> getContent(Provinceprovince);

}

<mappernamespace="com.json.province.dao.ProvinceMapper"> 

   <selectid="getContent"parameterType="int"resultType="com.json.province.pojo.Province">

      select * from province where parentid=#{parentid}

   </select> 

</mapper>

Pojo略

Jsp页面

使用js实现ajax，注意使用post方法时，设置RequestHeader的content-type为：”application/json”。这样就可支持传送json形式的字符串。另外，在springmvc的controller类的方法中，@RequestBody接收的不是json对象而是json形式的字符串。

xmlHttpR.setRequestHeader("Content-type","application/json");

xmlHttpR.send('{"parentid":0}');//可以直接传json形式的字符串；也可以使用JSON.stringify(json对象)，将json对象转为json形式的字符串后再传。

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

<title>Insert title here</title>

<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/prop/css/province.css"/>

</head>

<body>

   <divclass="wrapper">

      <span>省市县三级联动</span>

      <selectid="province"name="province"onchange="selectP(this)">

         <optionid="pr"value="-1">请选择</option>

      </select>

      <selectid="city"name="city"onchange="selectC(this)">

         <optionid="ci"value="-1">请选择</option>

      </select>

      <selectid="county"name="county"onchange="success(this)">

         <optionid="co"value="-1">请选择</option>

      </select>

   </div>

</body>

<script>

   var xmlHttpR;

   function getXHR(){

      if(window.XMLHttpRequest){

         xmlHttpR=new XMLHttpRequest();

      }else{

         xmlHttpR=new ActiveXObject("Microsoft.XMLHTTP")

      }

      return xmlHttpR;

   }

   window.onload=function(){

      xmlHttpR=getXHR();

      xmlHttpR.open("POST","${root}/haha/setProvince",true);

      xmlHttpR.setRequestHeader("Content-type","application/json");

      //vardata={"parentid":0,"codeid":0,"cityName":"none"};

      //alert(data);

      //vardata1=JSON.stringify(data);

      //alert(data1);

      xmlHttpR.send('{"parentid":0}');

      //alert(1);

      xmlHttpR.onreadystatechange=function(){

         if(xmlHttpR.readyState==4&&xmlHttpR.status==200){

            //alert(1);

            var provinces=xmlHttpR.responseText;

            var provincejson=JSON.parse(provinces);

            //alert(provinces);

            //alert(provincejson);

            var province=document.getElementById("province");

            for(indexin provincejson){

                var option=document.createElement("option");

                option.value=provincejson[index].codeid;

                option.setAttribute("id",provincejson[index].codeid);

                option.innerHTML=provincejson[index].cityName;

                province.appendChild(option);

            }

         }

      }

   }

   function selectP(obj){

      var parentid=obj.value;

      document.getElementById("city").length=1;

      document.getElementById("county").length=1;

      alert(parentid);

      if(parentid==-1){

         return;

      }

      xmlHttpR=getXHR();

      xmlHttpR.open("POST","${root}/haha/setProvince",true);

      xmlHttpR.setRequestHeader("Content-type","application/json");

      var data='{"parentid":'+parentid+'}';

      alert(data);

      xmlHttpR.send(data);

      xmlHttpR.onreadystatechange=function(){

         if(xmlHttpR.readyState==4&&xmlHttpR.status==200){

            var cities=xmlHttpR.responseText;

            var citiesjson=JSON.parse(cities);

            var city=document.getElementById("city");

            for(indexin citiesjson){

                var option=document.createElement("option");

               option.value=citiesjson[index].codeid;

                option.setAttribute("id",citiesjson[index].codeid)

                option.innerHTML=citiesjson[index].cityName;

                city.appendChild(option);

            }

         }

      }

   }

  

   function selectC(obj){

      var parentid=obj.value;

      document.getElementById("county").length=1;

      alert(parentid);

      if(parentid==-1){

         return;

      }

      xmlHttpR=getXHR();

      xmlHttpR.open("POST","${root}/haha/setProvince",true);

      xmlHttpR.setRequestHeader("Content-type","application/json");

      var data='{"parentid":'+parentid+'}';

      alert(data);

      xmlHttpR.send(data);

      xmlHttpR.onreadystatechange=function(){

         if(xmlHttpR.readyState==4&&xmlHttpR.status==200){

            var counties=xmlHttpR.responseText;

            var countiesjson=JSON.parse(counties);

            var county=document.getElementById("county");

            for(indexin countiesjson){

                var option=document.createElement("option");

                option.value=countiesjson[index].codeid;

                option.setAttribute("id",countiesjson[index].codeid)

                option.innerHTML=countiesjson[index].cityName;

                county.appendChild(option);

            }

         }

      }

   }

   function success(obj){

      var province=document.getElementById("province").value;

      varprovincei=document.getElementById(province).innerHTML;

      var city=document.getElementById("city").value;

      varcityi=document.getElementById(city).innerHTML;

      var county=document.getElementById("county").value;

      varcountyi=document.getElementById(county).innerHTML;

      alert("您的选址是："+provincei+"/"+cityi+"/"+countyi);

   }

</script>

</html>

使用到的数据库字段，请到搜索引擎网页中搜索省市县三级联动的数据库。

四、 Jquery的AJAX

Jquery提供了多个与AJAX有关的方法，jquery库拥有完整的ajax兼容套件。Jquery的ajax方法。

方法	描述
$.ajax()	执行异步 AJAX请求
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax()处理之前，处理自定义 Ajax选项或修改已存在选项
$.ajaxSetup()	为将来的 AJAX请求设置默认值
$.ajaxTransport()	创建处理 Ajax数据实际传送的对象
$.get()	使用 AJAX的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET请求从服务器加载 JSON编码的数据
$.getScript()	使用 AJAX的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()	创建数组或对象的序列化表示形式（可用于 AJAX请求的 URL 查询字符串）
$.post()	使用 AJAX的 HTTP POST请求从服务器加载数据
ajaxComplete()	规定 AJAX请求完成时运行的函数
ajaxError()	规定 AJAX请求失败时运行的函数
ajaxSend()	规定 AJAX请求发送之前运行的函数
ajaxStart()	规定第一个 AJAX请求开始时运行的函数
ajaxStop()	规定所有的 AJAX请求完成时运行的函数
ajaxSuccess()	规定 AJAX请求成功完成时运行的函数
load()	从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()	编码表单元素集为字符串以便提交
serializeArray()	编码表单元素集为 names和 values 的数组

常用方法。

1. $.ajax()

所有的jQuery ajax方法都使用ajax方法，功能最齐全，ajax方法常用语其他方法不能完成的请求。

语法：$.ajax({name:value,name:value,…});

$.ajax方法的部分名/值列表：

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context	为所有 AJAX相关的回调函数规定 "this"值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp中重写回调函数的字符串。
jsonpCallback	在一个 jsonp中规定回调函数的名称。
password	规定在 HTTP访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest对象的函数。

注意：其中data传输的值为json对象。

例子：

<body>

   <div>

      <inputtype="button"onclick="testajax()"value="testAJAX"/>

   </div>

</body>

   <scriptsrc="${root }/js/jquery1.8.js"type="text/javascript"></script>

   <script>

      $(function(){

         alert(1);

      })

      function testajax(){

         alert(1);

         $.ajax({

            url:"${root}/testJQajax",

            dataType:"html",

            data:{"name":"hahah","sex":"1"},

            type:"POST",

            success:function(data){

                alert(data);

            }

         })

      }

   </script>

Servlet处理请求和响应

   protected voiddoGet(HttpServletRequest request, HttpServletResponseresponse) throwsServletException, IOException {

      String name=request.getParameter("name");

      String sex=request.getParameter("sex");

      System.out.println(name+sex);

      response.getWriter().write(name+"--"+sex);

   }

2. load()

load()方法从服务器加载数据，并把返回的数据放置到指定的元素中。如果指定元素中有内容，会被覆盖。

语法：${selector}.load(url,data,function(response,status,xhr));

注意：回调函数在load传值到指定元素后执行。

例子：

<body>

   <div>

      <inputtype="button"onclick="testload()"value="testload"/>

   </div>

   <divid="div">

      点击testload，这里的内容会被覆盖替换。

   </div>

</body>

   <scriptsrc="${root }/js/jquery1.8.js"type="text/javascript"></script>

   <script>

      $(function(){

         alert(1);

      })

      function testload(){

         alert(1);

         $("#div").load(

            "${root}/testJQajax",

            {"name":"hahah","sex":"1"},

            function(data){

                alert(data);

            }

         );

      }

   </script>

Servlet同上。

3. $.get()和$.post()

$.get()使用HTTPGET请求从服务器加载数据。$.post()使用HTTP POST请求从服务器加载数据。除了请求方式和方法名不同，其他基本相同。

语法：$.get(URL,data,function(data,status,xhr),dataType);

参数描述

参数	描述
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： data - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型： "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应，并以纯文本返回 "json" - 以 JSON 运行响应，并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 "?callback=?" 到 URL 来规定回调

例子：

<body>

   <div>

      <inputtype="button"onclick="testget()"value="testget"/>

      <inputtype="button"onclick="testpost()"value="testpost"/>

   </div>

</body>

   <scriptsrc="${root }/js/jquery1.8.js"type="text/javascript"></script>

   <script>

      $(function(){

         alert(1);

      })

      function testget(){

         alert(1);

         $.get("${root}/testJQajax",

            {"name":"get","sex":"1"},

            function(data){

                alert(data);

            },

            "html"

         )

      }

      function testpost(){

         alert(1);

         $.post("${root}/testJQajax",

            {"name":"post","sex":"1"},

            function(data){

                alert(data);

            },

            "html"

         )

      }

   </script>

Servlet同上。

4. serialize()

serialize方法通过序列化表单值创建URL编码文本字符串。通俗的讲，就是将form表单中的整个表单或某些元素序列化为一种数据，可以使用ajax的方法将这个序列化的数据请求给服务器。

语法：$(selector).serialize();

例子：

Jsp页面

<body>

   <div>

       <formid="zhuce">

         <table>

            <tr>

                <td>用户名<fontcolor="red">*</font></td>

                <td><inputtype="text"name="username"/></td>

            </tr>      

            <tr>

                <td>密码</td>

                <td><inputtype="password"name="password"/></td>

            </tr>      

            <tr>

                <td>确认密码</td>

                <td><inputtype="password"name="repassword"/></td>

            </tr>

            <tr>

                <td>年龄</td>

                <td><inputtype="text"name="age"/></td>

            </tr>      

            <tr>

                <td>性别</td>

                <td>

                   <inputtype="radio"name="sex"value="男"/>男

                   <inputtype="radio"name="sex"value="女"/>女

                </td>

            </tr>             

            <tr>

                <td>爱好：</td>

                <td>

                   <inputtype="checkbox"name="hobby"value="C"/>C

                   <inputtype="checkbox"name="hobby"value="C++"/>C++

                   <inputtype="checkbox"name="hobby"value="Java"/>Java

                   <inputtype="checkbox"name="hobby"value="IOS"/>IOS

                   <inputtype="checkbox"name="hobby"value="PHP"/>PHP

                   <inputtype="checkbox"name="hobby"value="Android"/>Android

                </td>

            </tr>      

            <tr>

                <td>地址</td>

                <td>

                   <selectname="address">

                      <optionvalue="none">--请选择地址--</option>

                      <optionvalue="北京">北京</option>

                      <optionvalue="上海">上海</option>

                      <optionvalue="南京">南京</option>

                      <optionvalue="广州">广州</option>

                      <optionvalue="深圳">深圳</option>

                   </select>

                </td>

            </tr>

            <tr>

                <td>自我描述</td>

                <td>

                   <textareacols="40"rows="10"name="description"></textarea>

                </td>

            </tr>          

            <tr>

                <tdcolspan="2"><inputid="commit"type="button"value="注册"/></td>

             </tr>

         </table>       

      </form>

   </div>

</body>

   <scriptsrc="${root }/js/jquery1.8.js"type="text/javascript"></script>

   <script>

      $(function(){

         alert(1);

      })

      $("#commit").click(function(){

         var formdata=$("#zhuce").serialize();

         $.post("${root}/serializeAjax",formdata);

      })

   </script>

</html>

Servlet处理

   protected voiddoGet(HttpServletRequest request, HttpServletResponseresponse) throwsServletException, IOException {

      String username=request.getParameter("username");

      String address=request.getParameter("address");

      String hobbys[]=request.getParameterValues("hobby");

      System.out.println(username+"--"+address);

      for(Strings:hobbys){

         System.out.println(s);

      }

   }

5. 综合案例

使用jquery的ajax实现省市县三级联动

使用ssm框架，结合jquery的ajax实现省市县三级联动

Jsp页面

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

<title>Insert title here</title>

<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/prop/css/province.css"/>

</head>

<body>

   <divclass="wrapper">

      <span>省市县三级联动</span>

      <selectid="province"name="province">

         <optionid="pr"value="-1">请选择</option>

      </select>

      <selectid="city"name="city">

         <optionid="ci"value="-1">请选择</option>

      </select>

      <selectid="county"name="county">

         <optionid="co"value="-1">请选择</option>

      </select>

   </div>

</body>

<scriptsrc="${root }/prop/js/jquery1.8.js"type="text/javascript"></script>

<scripttype="text/javascript">

   alert(1);

   $(function(){

      alert(1);

      $.ajax({

         type:"POST",

         url:"${root}/haha/setProvinceJquery",

         data:'{"parentid":"0"}',

         success:function(data){

            //alert(data);

            $(data).each(function(){

                var codeid=this.codeid;

                var cityName=this.cityName;

                $("#province").append($("<option id='"+codeid+"' value='"+codeid+"'>"+cityName+"</option>"));

            })

         },

         contentType:"application/json"

      })

   })

   $("#province").change(function(){

      var parentid=$(this).val();

      //alert(parentid);

      $("#city").empty();

      $("#city").append('<option id="ci" value="-1">请选择</option>');

      $("#county").empty();

      $("#county").append('<option id="co" value="-1">请选择</option>');

      if(parentid==-1){

         return;

      }

      $.ajax({

         url:"${root}/haha/setProvinceJquery",

         type:"POST",

         data:'{"parentid":'+parentid+'}',

         success:function(data){

            //alert(data);

            $(data).each(function(){

                var codeid=this.codeid;

                var cityName=this.cityName;

                $("#city").append($("<option id='"+codeid+"' value='"+codeid+"'>"+cityName+"</option>"));

            })

         },

         contentType:"application/json"

      })

   })

   $("#city").change(function(){

      var parentid=$(this).val();

      //alert(parentid);

      $("#county").empty();

      $("#county").append('<option id="co" value="-1">请选择</option>');

      if(parentid==-1){

         return;

      }

      $.ajax({

         url:"${root}/haha/setProvinceJquery",

         type:"POST",

         data:'{"parentid":'+parentid+'}',

         success:function(data){

            //alert(data);

            $(data).each(function(){

                var codeid=this.codeid;

                var cityName=this.cityName;

                $("#county").append($("<option id='"+codeid+"' value='"+codeid+"'>"+cityName+"</option>"));

            })

         },

         contentType:"application/json"

      })

   })

   $("#county").change(function(){

      var province=$("#province").val();

      var provincei=$("#"+province).html();

      var city=$("#city").val();

      var cityi=$("#"+city).html();

      var county=$("#county").val();

      var countyi=$("#"+county).html();

      alert("您的选址是："+provincei+"/"+cityi+"/"+countyi);

   })

</script>

</html>

Ssm的处理业务同js的ajax方法的省市县三级联动。