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>