分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

JQuery实现AJAX异步请求实现省市联动(数据传输格式为json)

发布时间:2023-09-06 02:11责任编辑:郭大石关键词:jsjson异步请求

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)

原文地址:https://www.cnblogs.com/laodang/p/9525125.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved