JQuery实现AJAX异步请求实现省市联动（数据传输格式为json）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery实现AJAX异步请求实现省市联动（数据传输格式为json）相关的知识，希望对你有一定的参考价值。
json概述：javascript object notation 是一种轻量级的数据交换格式。
json本质上就是一种数据格式的字符串；
javascript可以直接解析json，因为json本身就是一种原声的javascript数据格式。(json就是js里面的一个数组或者对象)
json语法规则：
数据在键值对中；
数据由逗号分隔；
花括号保存对象；
方括号保存数组；
json值可以是：
数字（正数或浮点数）；
字符串（在双引号中）；
逻辑值（true或false）；
数组（在方括号中）；
对象（在花括号中）；
null；
eg： 1： {"key1":value1,"key2":value2,...} 2: [{"key1":value1,"key2":value2,...},{"key1":value1,"key2":value2,...},...]
{ "city":{"cid":1,"cname":"北京"} }
在服务器端json数据的生成工具：
1.fastjson工具
2.json-lib工具：
1 JSONArray jsonArray = JSONArray.fromObject(list);//将数组或者list集合转化为json； 2 //JSONObject.fromObject(object): //将对象或Map集合转成json； 3 response.setContentType("text/xml;charset=utf-8"); 4 response.getWriter().print(jsonArray.toString());//将JSONArray数据以字符串形式响应
1 //当返回的对象数据中需要过滤多余的信息可以使用JsonConfig对象。 2 JsonConfig config = new JsonConfig(); 3 config.setExcludes(new String[]{"pid"});//以字符串数组的形式设置过滤的成员字段， 4 JSONArray jsonArray = JSONArray.fromObject(list,config);//fromObject方法的重载，将JsonConfig传入 5 //JSONObject.fromObject(object) 6 response.setContentType("text/html;charset=utf-8"); 7 response.getWriter().print(jsonArray.toString());
在客户端解析json数据：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Hello Miss Dang</title> 5 </head> 6 <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#province").change(function(){ 10 var pid = $(this).val(); 11 $.post("${pageContext.request.contextPath}/CityJsonServlet",{"pid":pid},function(data){ 12 $("#city").html("<option>-请选择-</option>"); 13 $(data).each(function(i,n){ 14 $("#city").append("<option value = ‘"+n.cid+"‘>"+n.cname+"</option>"); 15 }); 16 },"json"); 17 }); 18 }); 19 </script> 20 <body> 21 <form> 22 <select id="province"> 23 <option>-请选择省-</option> 24 <c:forEach var="i" items="${ list }"> 25 <option value="${ i.pid }">${ i.pname }</option> 26 </c:forEach> 27 </select> 28 <select id = "city"> 29 </select> 30 </form> 31 </body> 32 </html>
以上是关于JQuery实现AJAX异步请求实现省市联动（数据传输格式为json）的主要内容，如果未能解决你的问题，请参考以下文章
javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）