JSON编写AJAX

1.导入

1.jQuery包

2.commons-beanutils-1.8.0包

3.commons-collections-3.1

4.commons-lang-2.5

5.commons-logging-1.1.3

6.ezmorph-1.0.6

7.json-lib-2.3-jdk15

2.省市联动

省份：
<select name="provenceId" onchange="provenceChange(this)">
<c:forEach items="${list }" var="pro">

<option value="${pro.provenceId }">${pro.provenceName }</option>
</c:forEach>
</select>
城市：
<select id="city" name="city">

</select>

3.页面的JSON代码

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function provenceChange(provence){
var id = provence.value;

//通过省份Id查找城市
$.getJSON("AccountSer?tap=getCity",{
//参数
id : id
}, function(json) {
//清空列表
document.getElementById("city").options.length = 0;
//回调函数
for(var i = 0 ;i < json.citys.length; i++ ){
//创建下拉项，追加内容
$("#city").append($("<option value="+json.citys[i].cityId+">"+json.citys[i].cityName+"</option>"));
}
});
}
</script>

4.从后台提取数据，把java对象装换成json对象

//把集合封装到JSAONArray里面
JSONArray jArray = JSONArray.fromObject(cityList);
//实例一个JSONObject对象
JSONObject jobject = new JSONObject();
//把封装好的集合加到JSONObject对象里
jobject.put("citys", jArray);
//返回数据
response.getWriter().write(jobject.toString());