ajax实现二级联动（服务器端返回json数据）

实现效果为上图

HTML 代码：

1 　　省份：<select id="province" onchange="getCity();">
2                <option >请选择--</option>
3          </select>
4     城市：<select id="city">
5             <option>请选择--</option>
6         </select>

xmlHttp.js 代码：

 1 function getXMLHttpRequest(){
 2     var xmlHttp;
 3     try{
 4         xmlHttp=new XMLHttpRequest();
 5     }catch(e){
 6         try{
 7             xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP");
 8         }catch(e){
 9             try{
10                 xmlHttp=new XMLHttpRequest("Microsoft.XMLHTTP");
11             }catch(e){
12                 alert("此浏览器不支持AJAX!");
13                 return false;
14             }
15         }
16     }
17     return xmlHttp;
18 }

xmlHttp.js

js代码：

 1 <script type="text/javascript" src="/jquery/js/xmlHttp.js"></script>
 2     <script type="text/javascript">
 3         window.οnlοad=function(){
 4             var provinceElement = document.getElementById("province");
 5             var xmlHttp = getXMLHttpRequest();
 6             xmlHttp.open("POST","/jquery/ProvinceServlet",true);
 7             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 8             xmlHttp.send();
 9             xmlHttp.onreadystatechange=function(){
10                 if(xmlHttp.readyState==4){
11                     if(xmlHttp.status==200){
12                         var text=xmlHttp.responseText;
13                         //将数据使用eval()方法改为JSON数据格式
14                         var provinces=eval("("+text+")");
15                         //遍历json数据  
16                         for(var i=0;i<provinces.length;i++){
17                             //获取json数据中省份的名字
18                             var provinceName=provinces[i].province;
19                             var optionElement = document.createElement("option");
20                             optionElement.setAttribute("value", provinceName);
21                             var text=document.createTextNode(provinceName);
22                             optionElement.appendChild(text);
23                             provinceElement.appendChild(optionElement);
24                         }
25                     }
26                 }
27             };
28         };
29         function getCity(){
30             var selectedProvinceName = document.getElementById("province").value;
31             var xmlHttp=getXMLHttpRequest();
32             xmlHttp.open("POST","/jquery/ProvinceServlet",true);
33             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
34             xmlHttp.send();
35             
36             xmlHttp.onreadystatechange=function(){
37                 if(xmlHttp.readyState==4){
38                     if(xmlHttp.status==200){
39                         var text = xmlHttp.responseText;
40                         var provinces = eval("("+text+")");
41                         var selectProvince=null;
42                         for(var i=0;i<provinces.length;i++){
43                             if(selectedProvinceName==provinces[i].province){
44                                 selectProvince = provinces[i];
45                                 break;
46                             }
47                         }
48                         var cityElement = document.getElementById("city");
49                         var oldOptions =cityElement.getElementsByTagName("option");
50                         for(var i=1;i<oldOptions.length;){
51                             cityElement.removeChild(oldOptions[i]);
52                         }
53                         var citys = selectProvince.citys;
54                         for(var i=0;i<citys.length;i++){
55                             var cityName = citys[i].name;
56                             var optionElement = document.createElement("option");
57                             optionElement.setAttribute("value", cityName);
58                             var textNode = document.createTextNode(cityName);
59                             optionElement.appendChild(textNode);
60                             cityElement.appendChild(optionElement);
61                         }
62                     }
63                 }
64             };
65         }
66     </script>

js代码

 建立两个实体类，用来储存json数据：

public class Province {
    private String province;
    private List<City> citys;
    public Province(){}
    public Province(String province, List<City> citys) {
        super();
        this.province = province;
        this.citys = citys;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public List<City> getCitys() {
        return citys;
    }

    public void setCitys(List<City> citys) {
        this.citys = citys;
    }
}

Province.java

 1 public class City {
 2     private String name;
 3 
 4     public City() {}
 5     
 6     public City(String name) {
 7         super();
 8         this.name = name;
 9     }
10 
11     public String getName() {
12         return name;
13     }
14 
15     public void setName(String name) {
16         this.name = name;
17     }
18 }

City.java

服务器端代码：

 1 public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3             response.setCharacterEncoding("utf-8");
 4             response.setContentType("text/html;charset=utf-8");
 5             List<City> citys1 = new ArrayList<City>();
 6             citys1.add(new City("海淀区"));
 7             citys1.add(new City("朝阳区"));
 8             citys1.add(new City("昌平区"));
 9             citys1.add(new City("东城区"));
10             Province province1 = new Province("北京", citys1);
11             List<City> citys2 = new ArrayList<City>();
12             citys2.add(new City("济南市"));
13             citys2.add(new City("烟台市"));
14             citys2.add(new City("威海"));
15             citys2.add(new City("青岛"));
16             Province province2 = new Province("山东省", citys2);
17             List<City> citys3 = new ArrayList<City>();
18             citys3.add(new City("徐州"));
19             citys3.add(new City("南京"));
20             citys3.add(new City("苏州"));
21             citys3.add(new City("杭州"));
22             Province province3 = new Province("江苏省", citys3);
23             List<Province> provinces = new ArrayList<Province>();
24             provinces.add(province1);
25             provinces.add(province2);
26             provinces.add(province3);
27             
28             JSONArray jsonArray = JSONArray.fromObject(provinces);
29             response.getWriter().println(jsonArray.toString());
30     }

ProvinceServlet

 

转载于:https://www.cnblogs.com/41uLove/p/5469634.html