JavaScript使用json2.js对json数据进行解析

实体类City

public class City {      private Integer cityId;      private String cityName;      private Integer provinceId;            public City() {          super();      }            public City(String cityName, Integer provinceId) {          super();          this.cityName = cityName;          this.provinceId = provinceId;      }        public City(Integer cityId, String cityName, Integer provinceId) {          super();          this.cityId = cityId;          this.cityName = cityName;          this.provinceId = provinceId;      }      public Integer getCityId() {          return cityId;      }      public void setCityId(Integer cityId) {          this.cityId = cityId;      }      public String getCityName() {          return cityName;      }      public void setCityName(String cityName) {          this.cityName = cityName;      }      public Integer getProvinceId() {          return provinceId;      }      public void setProvinceId(Integer provinceId) {          this.provinceId = provinceId;      }  }

服务器端：DistrictServices

 

   public void doPost(HttpServletRequest request, HttpServletResponse response)              throws ServletException, IOException {            response.setContentType("text/html");          response.setCharacterEncoding("GBK");          PrintWriter out = response.getWriter();          CityDao cityDao=new CityDao();          String op=request.getParameter("op");          if("changeCities".equals(op)){              String provinceId=request.getParameter("provinceId");              if(provinceId!=null&&!"".equals(provinceId)){                  Integer id=Integer.parseInt(provinceId);                  List<City> cities=cityDao.getCitiesByProvinceId(id);                  JSONObject json = new JSONObject();                  json.put("cities", cities);                  out.println(json.toString());              }else{                  out.print(false);              }          }                    out.flush();          out.close();        }

页面：

<script src="json2.js" language="javascript" type="text/javascript"></script>

  <script language="javascript">
    var xmlhttp;//声明浏览器初始化对象变量
    function changeCities() {
        var f = document.myform;
        var provinceId = f.provinceId.value;
        doAjax("DistrictServices?op=changeCities&provinceId=" + provinceId);
    }
    function doAjax(url) {
        if (window.XMLHttpRequest) // firefox
        {
            xmlhttp = new XMLHttpRequest();
        } else if (typeof ActiveXObject != "undefined") // IE
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //判断XMLHttpRequest对象是否成功创建
        if (!xmlhttp) {
            alert("不能创建XMLHttpRequest对象实例");
            return false;
        }

        //创建请求结果处理程序
        xmlhttp.onreadystatechange = processReuqest;

        xmlhttp.open("post", url, true);
        //如果以post方式请求，必须要添加
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xmlhttp.send(null);
    }

    function processReuqest() {
        if (xmlhttp.readyState == 4) {//等于4代表请求完成
            if (xmlhttp.status == 200) {

                //responseText表示请求完成后，返回的字符串信息                
                if (xmlhttp.responseText == "false") {
                    alert("暂无城市信息");
                } else {
                    
                    var object =JSON.parse(xmlhttp.responseText);
                    var cities=object.cities;
                    var citySelect = document.getElementById("cityId");
                    citySelect.length=0;
                    for(var i =0;i<cities.length;i++)
                    {
                           var option =document.createElement("option");
                          option.text=cities[i].cityName;
                          option.value=cities[i].cityId;
                          citySelect.options.add(option);
                    }
                }
            } else {
                alert("请求处理返回的数据有错误");
            }
        }
    }
</script>

 

  <%
      ProvinceDao provinceDao=new ProvinceDao();
      List<Province> provinces=provinceDao.getProvinces();
 
   %>
     <form id="myform" name="myform" method="post" action="DistrictServices?op=save">
      <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr height="50">
          <td>请选择省份：</td>
          <td>
            <select name="provinceId" id="provinceId" onchange="changeCities()">
                <%for(int i=0;i<provinces.size();i++) {
                    Province province=provinces.get(i);
                %>
                      <option value=<%=province.getProvinceId()%>><%=province.getProvinceName() %></option>
                  <%} %>
            </select>
          </td>
        </tr>
        <tr height="50">
          <td>请选择城市：</td>
          <td>
              <select name="cityId" id="cityId">
                  <option value="请选择城市">请选择城市</option>
              </select>
          </td>
        </tr>
        <tr height="50">
          <td>请输入城区：</td>
          <td>
              <input name="districtId" type="text" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit"  value="提交" />
            <input type="reset" value="重置" /></td>
        </tr>
      </table>
    </form>