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 来规定回调

JavaWeb学习之JSON AJAX省市联动（数据格式：Json）

猜你喜欢