利用Ajax和JSON实现关于查找省市名称的二级联动功能

　　功能实现的思路：我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能，我们可以利用Ajax和JSON技术模拟这个功能，说白了同样是使用Ajax的局部数据更新功能这个特性。因为省市都会有很多个，所以还需要使用JSONArray对象。当我们选择某一个省的时候，会自动触发一个局部更新功能，这个功能的作用就是把我们选择的关于这个省的所有市名全部在指定的位置显示出来，当换成另外一个省的时候，还能自动把前边的选择的别的省所包含的市名全部删除换成当前选择省包含的市名。

实现步骤：

1、设计前端界面（毫无艺术感的前端界面）：

 <body>

     省：

     <select id="sheng" onchange="loadInfo()">

         <option value="1">河南省</option>

         <option value="2">四川省</option>

         <option value="3">浙江省</option>

         <option value="4">山东省</option>

     </select>

     &nbsp;

     &nbsp;

     市：

     <select id="shi">

     </select>

 </body>

2、利用XMLHttpRequset对象放松请求并且接收从服务器端传来的处理结果：

（这里需要注意的是添加重置操作是必要的，因为添加进JSONArray数组的数据如果不清除的话，下一次输出结果的时候还会输出出来，这样会相当于把不属于这个省的市名也给输出出来了，这显然不符合设计要求）

 <script type="text/javascript">

     function loadInfo(){

         var shengID = document.getElementById("sheng").value;

         //这里要添加一个重置操作，确保每一次查询之前JsonArray数组是空的。

         document.getElementById("shi").options.length=0;

         //获取XMLHttpRequest对象（有些浏览器没有XMLHttpRequest这个对象，所以获取之前需要先判断一下）

         var xmlHttp;

         if (window.XMLHttpRequest) {

             xmlHttp = new XMLHttpRequest();

         } else {

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

         }

         xmlHttp.onreadystatechange = function() {

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

                 //alert(xmlHttp.responseText);

                 var dataObj = eval("(" + xmlHttp.responseText + ")");

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

                     var o=dataObj.rows[i];

                     //利用Selectobject对象的options方法动态的添加option选项

                     document.getElementById("shi").options.add(new Option(o.text,o.id));

                 }

             }

         }

         xmlHttp.open("get", "getAjaxName2?shengID="+shengID, true);

         xmlHttp.send();

     }

 </script>

3、编写处理该请求的后台servlet代码：（这里依然没有使用数据库查询功能，而是手动添加了每个省份包含的市名作为例子使用。）

 package com.java1234.web;

 import java.io.IOException;

 import java.io.PrintWriter;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import net.sf.json.JSONArray;

 import net.sf.json.JSONObject;

 public class GetAjaxNameServlet2 extends HttpServlet {

     /**

      *

      */

     private static final long serialVersionUID = 1L;

     @Override

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         this.doPost(request, response);

     }

     @Override

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

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

         PrintWriter out = response.getWriter();

         //取出从前端页面传入的待查询省份的shengID

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

         JSONObject resultJson = new JSONObject();

         /**

          * JSONArray对象的作用：每个省份都会有好多个市，当确认是那个省之后，

          * 就会把每个省的所有市 的名称包含ID全部添加进JSONArray对象中,最后再把这个包含

          * 待查询市的JSONArray对象当成一个对象添加进名为resultJson的JSONObject对象中。

          */

         JSONArray jsonArray = new JSONArray();

         JSONObject temp = null;

         //这里只是模拟一下数据库查询操作

         switch (Integer.parseInt(shengID)) {

             case 1: {

                 temp = new JSONObject();temp.put("id", 1);temp.put("text", "郑州市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 2);temp.put("text", "南阳市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 3);temp.put("text", "周口市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 4);temp.put("text", "商丘市");

                 jsonArray.add(temp);

                 break;

             }

             case 2: {

                 temp = new JSONObject();temp.put("id", 5);temp.put("text", "成都市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 6);temp.put("text", "绵阳市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 7);temp.put("text", "乐山市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 8);temp.put("text", "达州市");

                 jsonArray.add(temp);

                 break;

             }

             case 3: {

                 temp = new JSONObject();temp.put("id", 9);temp.put("text", "杭州市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 10);    temp.put("text", "温州市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 11);temp.put("text", "南通市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 12);    temp.put("text", "宁波市");

                 jsonArray.add(temp);

                 break;

             }

             case 4: {

                 temp = new JSONObject();temp.put("id", 13);temp.put("text", "济南市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 14);    temp.put("text", "青岛市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 15);temp.put("text", "泰安市");

                 jsonArray.add(temp);

                 temp = new JSONObject();temp.put("id", 16);    temp.put("text", "聊城市");

                 jsonArray.add(temp);

                 break;

             }

         }

         resultJson.put("rows", jsonArray);

         out.println(resultJson);

         out.flush();

         out.close();

     }

 }

4、配置web.xml文件然后运行就能实现这个功能。（运行结果是一个截图不再贴出来了，结果不重要，过程实现好了结果自然而然的不会差!）

　　总结：这是一个省市查询问题的二级联动，相对三级联动还算简单一点，但这简单的例子也是能帮助自己理解这一类问题的。这里我按自己的理解说明一下三级联动的实现思路：就是当我们选择到某一个市的时候，还要再触发一个事件，这个事件就是要动态查找数据库然后把关于这个市所包含的所有县级城市名称全部输出到指定的位置，当然了，这个触发事件的实现函数还是要像查找市级城市名称方法一样获取选择的市级城市然后作为参数传入后台进行查询并把结果全部封装到一个JSONObject对象中，然后在前端进行数据处理并进行展示。