Java Web——Ajax(实现省份城市二级联动)

一、当用户点击具体省份后，出发onchange()方法，处理到javascript中

 

 1 var xhr = false;
 2     
 3     function getCity()
 4     {
 5         //1.创建XMLHttpRequest对象
 6         //非IE浏览器
 7         if(window.XMLHttpRequest)
 8         {
 9             xhr = new XMLHttpRequest();
10         }
11         //IE浏览器
12         else if(window.ActiveXObject)
13         {
14             xhr = new ActiveXObject("Microsoft.XMLHTTP");
15         }
16         if(xhr)
17         {
18             /*
19                 GET请求
20             */
21             //2.定义url连接
22             /* var proObj = document.getElementById("province");
23             var proId = proObj.options[proObj.selectedIndex].value;
24             var url = "GetCityServlet?proId="+proId;
25             //3.打开到服务器的连接
26             xhr.open("get", url, true);
27             //4.绑定回调函数（响应回来了，可以处理响应内容的函数）
28             xhr.onreadystatechange = callback;
29             //5.向服务器发送请求
30             xhr.send(null); */
31             /*
32                 POST请求
33             */
34             //2.定义url连接
35             var url = "GetCityServlet";
36             //3.打开到服务器的连接
37             xhr.open("post", url, true);
38             
39             //注意：post提交方式必须配置内容类型--------------------------------------------------
40             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
41             
42             //4.绑定回调函数（响应回来了，可以处理响应内容的函数）
43             //xhr.onreadystatechange = callback_XML;
44             xhr.onreadystatechange = callback_JSON;
45             //5.向服务器发送请求
46             var proObj = document.getElementById("province");
47             var proId = proObj.options[proObj.selectedIndex].value;
48             xhr.send("proId="+proId);
49         }
50         else
51         {
52             alert("XMLHttpRequest创建失败");
53         } 
54     }

 

 

注意：1.通过ajax可以用get或者post发送到服务器

　　　2.Ajax步骤：（1）生成XMLHttpRequest对象（2）定义url连接（3）打开连接（4）绑定回调函数（5）向服务器发送请求

二、服务端执行相应的操作，并需要将数据响应给回调函数（通过XML方式；通过JSON方式）

（1）通过XML方式

 1 String proId = request.getParameter("proId");
 2         
 3         //根据选中的省份proId去数据获取对应的城市List
 4         List<City> cityList = new ArrayList<City>();
 5         if("1000".equals(proId))//广东省
 6         {
 7             cityList.add(new City(1001,"广州市"));
 8             cityList.add(new City(1002,"深圳市"));
 9             cityList.add(new City(1003,"肇庆市"));
10         }
11         else if("2000".equals(proId))//广西省
12         {
13             cityList.add(new City(2001,"桂林市"));
14             cityList.add(new City(2002,"柳州市"));
15             cityList.add(new City(2003,"玉林市"));
16         }
17         else if("3000".equals(proId))//海南省
18         {
19             cityList.add(new City(3001,"海口市"));
20             cityList.add(new City(3002,"三亚市"));
21             cityList.add(new City(3003,"澄迈市"));
22         }
23         /*
24              <?xml version="1.0" encoding="UTF-8"?>
25             <cities>
26                 <city>
27                     <cid>1001</cid>
28                     <cname>广州市</cname>
29                 </city>
30                 <city>
31                     <cid>1002</cid>
32                     <cname>深圳市</cname>
33                 </city>
34                 <city>
35                     <cid>1003</cid>
36                     <cname>肇庆市</cname>
37                 </city>
38             </cities>
39          */
40         StringBuffer xml = new StringBuffer();
41         
42         xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
43         xml.append("<cities>");
44         for (City city : cityList) {
45             xml.append("<city>");
46                 xml.append("<cid>"+city.getCid()+"</cid>");
47                 xml.append("<cname>"+city.getCname()+"</cname>");
48             xml.append("</city>");
49         }
50         xml.append("</cities>");
51         
52         System.out.println(xml.toString());
53         
54         //设置响应字符集编码
55         response.setCharacterEncoding("utf-8");
56         response.setContentType("text/xml;charset=utf-8");
57         
58         PrintWriter writer = response.getWriter();
59         writer.write(xml.toString());
60         writer.flush();
61         writer.close();

 

注意：相当于把XML文档格式编写成字符串，然后将字符串响应给回调函数（XML方式应用于不同的web应用之间传递数据）

（2）JSON方式

 

 1 String proId = request.getParameter("proId");
 2         
 3         //根据选中的省份proId去数据获取对应的城市List
 4         List<City> cityList = new ArrayList<City>();
 5         if("1000".equals(proId))//广东省
 6         {
 7             cityList.add(new City(1001,"广州市"));
 8             cityList.add(new City(1002,"深圳市"));
 9             cityList.add(new City(1003,"肇庆市"));
10         }
11         else if("2000".equals(proId))//广西省
12         {
13             cityList.add(new City(2001,"桂林市"));
14             cityList.add(new City(2002,"柳州市"));
15             cityList.add(new City(2003,"玉林市"));
16         }
17         else if("3000".equals(proId))//海南省
18         {
19             cityList.add(new City(3001,"海口市"));
20             cityList.add(new City(3002,"三亚市"));
21             cityList.add(new City(3003,"澄迈市"));
22         }
23         
24         JSONArray json = JSONArray.fromObject(cityList);//----------------对象转json数组
25         
26         System.out.println(json.toString());
27         
28         //设置响应字符集编码
29         response.setCharacterEncoding("utf-8");
30         response.setContentType("application/json;charset=utf-8");
31         
32         PrintWriter writer = response.getWriter();
33         writer.write(json.toString());
34         writer.flush();
35         writer.close();
36     }

 

 

注意：1.JSON方式多用于在自己的web应用中传递数据

　　　2.JSON是将对象组成了一个JSON数组然后发给回调函数

　　　3.需要导入对应的jar包

三、回调函数进行响应操作

（1）XML方式：

 

 1 //回调函数
 2     function callback_XML()
 3     {
 4         if(xhr.readyState == 4)//响应完成
 5         {
 6             if(xhr.status == 200)//正常响应
 7             {
 8                 /*
 9                 <cities>
10                     <city>
11                         <cid>2001</cid>
12                         <cname>桂林市</cname>
13                     </city>
14                     
15                     ........
16                     
17                 </cities>
18                 */
19                 //alert("响应完成Text:" + xhr.responseText);
20                 var cityXml = xhr.responseXML;
21                 //获取xml文档根元素<cities>
22                 var root = cityXml.documentElement;
23                 //获取xml文档根元素<cities>下所有<city>节点
24                 var cities = root.getElementsByTagName("city");
25                 
26                 var cityObj = document.getElementById("city");
27                 //遍历获取每一个<city>节点
28                 cityObj.options.length = 1;//下一次选择省份时可以删掉上次绑定的内容
29                 for(var i=0;i<cities.length;i++)
30                 {
31                     var city = cities[i];//单个<city>
32                     //获取<cid>中的文本值
33                     var cid = city.childNodes[0].firstChild.nodeValue;
34                     //获取<cname>中的文本值
35                     var cname = city.childNodes[1].firstChild.nodeValue;
36                     
37                     //绑定到城市下拉列表
38                     cityObj.options[cityObj.options.length] =  new Option(cname,cid);
39                 }
40             }
41         }
42     }

 

 

注意：1.通过XML对应的数据解析方法将传来的字符串重新解析为XML文档，随后进行数据的提取

（2）JSON方式：

 1 //回调函数
 2     function callback_JSON()
 3     {
 4         if(xhr.readyState == 4)//响应完成
 5         {
 6             if(xhr.status == 200)//正常响应
 7             {
 8                 /*
 9                     [
10                      {"cid":1001,"cname":"广州市"},
11                      {"cid":1002,"cname":"深圳市"},
12                      {"cid":1003,"cname":"肇庆市"}
13                     ]
14 
15                 */
16                 var json = xhr.responseText;
17                 var cityArray = eval(json);
18                 
19                 var cityObj = document.getElementById("city");
20                 cityObj.options.length = 1;
21                 for(var i=0;i<cityArray.length;i++)
22                 {
23                     var city = cityArray[i];
24                     
25                     var cid = city.cid;//cid属性值
26                     var cname = city.cname;//cname属性值
27                     
28                     //绑定到城市下拉列表
29                     cityObj.options[cityObj.options.length] =  new Option(cname,cid);
30                 }
31                 
32             }
33         }
34     }

 

注意：1.将得到的JSON数组通过eval()函数进行解析，可以得到一个对象数组，遍历即可拿到对应的值

 

转载于:https://www.cnblogs.com/ccw95/p/6042973.html