zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    05用户故事与敏捷方法笔记之五
    04用户故事与敏捷方法笔记之四
    03用户故事与敏捷方法笔记之三
    框架学习.关于内省api操作bean属性
    02用户故事与敏捷方法笔记之二
    01用户故事与敏捷方法笔记之一
    问题账户需求分析
    2017年秋季个人阅读计划
    第二冲刺项目进展
    典型用户与场景
  • 原文地址:https://www.cnblogs.com/laodang/p/9525125.html
Copyright © 2011-2022 走看看