JQuery實現AJAX異步請求實現省市聯動（數據傳輸格式為json）
阿新 • • 發佈：2018-08-23
數據傳輸 char html utf-8 har change 字段 語法規則 false 
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);//json-lib示例1將數組或者list集合轉化為json； 2 //JSONObject.fromObject(object): //將對象或Map集合轉成json； 3 response.setContentType("text/xml;charset=utf-8"); 4 response.getWriter().print(jsonArray.toString());//將JSONArray數據以字符串形式響應
1 //當返回的對象數據中需要過濾多余的信息可以使用JsonConfig對象。 2 JsonConfig config = newjson-lib示例2JsonConfig(); 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數據：
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）