Ajax局部刷新--用“省”动态的选择“市”

在前端我们经常会使用到这样一种情况，选择一个省，然后再选择这个省底下的某个市，类似于这样的先选择一个范围，然后再在这个范围内再次精确的选择。这里一般使用异步刷新，也就是页面的局部刷新而不是整个页面刷新，因此需要使用到AJAX技术。下来我以修改个人信息的时候选择省和市为例，说一说我是如何做的（不对的地方，希望您指正）：

首先打开修改信息页面（edit.jsp）时，后台将省的集合province(list集合)放在request中，前台使用EL表达式循环输出，形成下拉选择框。如下代码所示：

<select style="width: 80px;"name="province" id="province" οnclick="empty()">

<option>省</option>

<c:forEach items="${provinces }" var="province">

<option value="${province.dictContent }" name="province">${province.dictContent }</option>

</c:forEach>

</select> <select style="width: 100px;" name="city" id="city1">

<option id="city2">市</option></select>

正如所看到的，一般情况下，都是使用select选择框，下面的具体选择则是select内部的option，因此将集合在option这里使用EL表达式循环集合，实现后台查询，前台显示。

上面只是第一步，选择”省”，这一步是随着页面的打开进行的，并无难度，上面提到的异步刷新是针对市来说的，也就是选择一个省，然后将省的信息提交到后台，后台调用数据库查询该省下面的所有市的集合city（list集合），返回给前台，然后前台遍历显示。

这里需要用到ajax代码，如下所示：

       $(document)    .ready(

                      function() {                       

                      $('#province').click(    function() {

                      $.ajax({

              url : "http://localhost:8888/JavaEEProjectLoveFive/city.action",

                      type : "post",

                      dataType : "json",

                      data : {

                      "province" : $('#province').val(),

                      },

                      success : function(tip) {

                             var i=0;

                            var stateObj= document.getElementById("city1");

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

                                                 var newOption = new Option(tip[i].city,tip[i].city);

                                                 stateObj.options.add(newOption);

                      }

                      }

                     });

                     });

              });

                            function empty(){

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

                            }     

没错，是在ajax代码中进行“市”的循环遍历输出，方法是先获得“市”所在的select对象Obj，然后使用循环声明新的Option对象，其有两个参数，（txt,value）,将市的集合的某一个值赋给这个新的option，然后使用Obj.options.add(Option),将这个新的option添加入市的select对象，这样就实现了前台选择省，市随着动态显示的目的了。

此外，后面的empty()函数，是为了每次重新选择省时让上市下面的内容清空，以便于新的市显示。上面代码我写的是每选择一个省（由于页面没有刷新，因此edit.jsp加载的时候传递过来的省的集合一直有效，因此可以选择不同的省）时就调用这个empty()方法，以用来清空市select下面的内容。

 

以上是前段代码，下面我们来看后端代码，这里只说将省传递到后台然后后台查询数据库将“市”集合再传递给前台的这部分代码。

//拿到前台传递来的省的信息

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

              if (!province.equals("省")) {

                     //使用前台的省信息查询相应的市的集合

                     List<Dict> citys = dictBiz.getCity(province, "");

                     //初始化一个json数据类型的集合

                     JSONArray jsonArray = new JSONArray();

                     //遍历市集合

                     for (Dict dict : citys) {

                            //初始化一个JSONObject对象

                            JSONObject jsonObject = new JSONObject();

                            //将一个市的信息放进刚声明的JSONObject对象内

                            jsonObject.put("city", dict.getDictContent());

                     //往声明的JSONArray集合内添加一个JSONObjest对象

                            jsonArray.add(jsonObject);

                            System.out.println(dict);

                     }

                     System.out.println(jsonArray);

                     try {

                     //将JSONArray集合传递给前台

                            response.getWriter().print(jsonArray);

                     } catch (IOException e) {

                            // TODO Auto-generated catch block

                            e.printStackTrace();

                     }

              }

以上就是代码，需要注意的是JSON数据类型，踏实一种k-v形式的键值对格式，小白的我也是了解的皮毛，因此需要详细了解的请自行百度。