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>