• JavaWeb学习之JSON AJAX省市联动(数据格式:Json)


    一、JSON 阅读性更好 、 容量更小。

    {"key":"value" , "key1":value1}

    二、JSON应用

    ①、下载所需jar文件,需要准备下面的六个jar包:

      commons-beanutils:http://commons.apache.org/proper/commons-beanutils/download_beanutils.cgi

      commons-collections:https://commons.apache.org/proper/commons-collections/download_collections.cgi

      commons-lang:https://commons.apache.org/proper/commons-lang/download_lang.cgi

      commons-logging:http://commons.apache.org/proper/commons-logging/download_logging.cgi

      ezmorph:https://sourceforge.net/projects/ezmorph/files/ezmorph/ezmorph-1.0.6/

      json-lib:http://sourceforge.net/projects/json-lib/files/json-lib/

    ②、JavaBean转JSON 

     1     @Override
     2     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     3     try {
     4         int pId = Integer.parseInt(req.getParameter("pId"));
     5         System.out.println(pId);
     6         ICityDao dao = new CityDaoImpl();
     7 
     8         List<City> list = dao.getCities(pId);
     9 
    10         // 3. 把list ---> json数据
    11         // JSONArray ---> 变成数组 , 集合 [{... ...},{... ...}]
    12         // JSONObject ---> 变成简单的数据 {"name": "深圳","id": 1,"pid": 1}
    13 
    14         JSONArray jsonArray = JSONArray.fromObject(list);
    15         String json = jsonArray.toString();
    16         System.out.println(json);
    17         resp.setContentType("text/html;charset=utf-8");
    18         resp.getWriter().write(json);
    19 
    20     } catch (SQLException e) {
    21 
    22         e.printStackTrace();
    23     }
    24     }

    ③、JQuery操作JSON

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <!DOCTYPE html>
     4 <html>
     5 <head>
     6 <meta charset="UTF-8">
     7 <title>Insert title here</title>
     8 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
     9 <script type="text/javascript">
    10 $(function() {
    11     //1。找到省份的元素
    12     $("#province").change(function() {
    13         //2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据
    14         var pid = $(this).val();
    15         
    16         /*[
    17             {
    18                 "name": "深圳",
    19                 "id": 1,
    20                 "pid": 1
    21             },
    22             {
    23                 "name": "东莞",
    24                 "id": 2,
    25                 "pid": 1
    26             }
    27             ...
    28         ]*/
    29         $.post( "CityServlet",{pid:pid} ,function(data,status){
    30             //先清空
    31             $("#city").html("<option value='' >-请选择-");
    32             //再遍历,追加
    33             $(data).each(function(index , c) {
    34                 $("#city").append("<option value='"+c.id+"' >"+c.name)
    35             });
    36         },"json" );
    37         
    38     });
    39 });
    40 </script>
    41 </head>
    42 <body>
    43 
    44     省份:
    45     <select name="province" id="province">
    46         <option value="">-请选择 -
    47         <option value="1">河北
    48         <option value="2">山西
    49         <option value="3">江苏
    50         <option value="4">安徽
    51     </select> 
    52     城市:
    53     <select name="city" id="city">
    54         <option value="">-请选择 -
    55     </select>
    56 </body>
    57 </html>

    三、总结  

    * load
      语法格式:$(selector).load(URL,data,callback:function(data,status,xhr))
    * get
      语法格式 : $.get(URL,data,callback:function(data,status,xhr),dataType)
    * post
      语法格式:$.post(URL,data,callback:function(data,status,xhr),dataType);
     
    参数描述
    URL 必需。规定您需要请求的 URL。
    data 可选。规定连同请求发送到服务器的数据。
    function(data,status,xhr) 可选。规定当请求成功时运行的函数。
    额外的参数:
    • data - 包含来自请求的结果数据
    • status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
    • xhr - 包含 XMLHttpRequest 对象
    dataType 可选。规定预期的服务器响应的数据类型。
    默认地,jQuery 会智能判断。
    可能的类型:
    • "xml" - 一个 XML 文档
    • "html" - HTML 作为纯文本
    • "text" - 纯文本字符串
    • "script" - 以 JavaScript 运行响应,并以纯文本返回
    • "json" - 以 JSON 运行响应,并以 JavaScript 对象返回
    • "jsonp" - 使用 JSONP 加载一个 JSON 块,将添加一个 "?callback=?" 到 URL 来规定回调
  • 相关阅读:
    as2 loadvars
    Playing with Content-Type – XXE on JSON Endpoints
    Hostile Subdomain Takeover using HerokuGithubDesk + more
    XSS for domain takeover
    XSS via XML POST
    dns 查询中的ANY类型
    crossDomain、allowDomain()、allowScriptAccess三者的关系
    ReadingWriting files with MSSQL's OPENROWSET
    Github html文件在线预览方法
    boostrap莫泰对话框宽度调整
  • 原文地址:https://www.cnblogs.com/WarBlog/p/12603158.html
Copyright © 2020-2023  润新知