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;
}
}</pre>
服務器端：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();
}</pre> <p></p>
頁面：
<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>