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,...},...]
简单的json数据格式示例
{
            "city":{"cid":1,"cname":"北京"}
        }
复杂的json数据示例（存在数组对象之间的嵌套）

在服务器端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数据以字符串形式响应
json-lib示例1
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-lib示例2

在客户端解析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>
View Code

 

posted on 2018-08-23 17:25  zeronexyz  阅读(181)  评论(0)  编辑  收藏  举报