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,...},...]
简单的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

 











以上是关于JQuery实现AJAX异步请求实现省市联动(数据传输格式为json)的主要内容,如果未能解决你的问题,请参考以下文章

javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)

JavaWeb中Ajax的使用-基本使用+省市联动例子

jquery ajax实现省市二级联动

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

jquery,ajax实现二级省市联动

三级联动怎么回显 javaweb