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>

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

时间: 2024-11-05 18:40:40

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

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

AJAX的响应的数据格式: 文本,一段HTML的数据,XML,JSON. 使用工具生成xml的文件: 通常使用XStream工具,将集合,数组,对象转化成XML格式. 步骤一:导入XStream工具包:xpp3_min-1.1.4c.jar:xstream-1.4.4.jar; 步骤二:XStream的使用: List<City> list = ps.searchCityByPid(pid); XStream xStream = new XStream();//创建XStream对象 xStr

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

利用jQuery发送ajax异步请求

//很少接触JQuery的Ajax请求 就想着记录一下 到时候有用 $('form').submit(function (e) { // 阻止表单默认提交 e.preventDefault(); var name = $('#name').val(); var password = $('#password').val(); var data = JSON.stringify({"name": name, "password": password}); // 异步发

Ajax异步请求一般处理程序(List)返回Json数据

简单实现了通过jQuery的Ajax函数异步请求一般处理程序,数据由list模拟,返回json格式的数据. index.html: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery.min.js" type="text/javasc

Jquery中Ajax异步请求中的async参数的作用

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp;     $.ajax({         async: false,         type : "GET",         url :

关于jQuery的Ajax异步请求,本人喜欢写笔记,写的不好还望见谅

<form id="myform" name="myform" > 用户名:<input type="text" id="username" name="username"><br> 密码:<input type="text" id="password" name="password"><br&

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

关于jquery同步和异步请求问题总结

关于jquery同步和异步请求问题总结 问题 这几天做项目的时候,写脚本遇到一个问题,就是jquery异步请求和同步请求执行顺序不按代码顺序执行而是最后执行导致添加数据报错,添加到空值,这怎么忍,于是我去查找jquery api,终于知道了原来jquery默认异步请求,防止数据卡死,终于让我找到了这货 async,当async: true 时,ajax请求是异步的.当async : true 时,就是同步的,但是我又有个问题,怎么设置,这个在哪设置,用$.ajax去写这个操作,不,不太麻烦了,到

MVC的Ajax异步请求

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @using (Ajax.BeginForm("GetTime","order",new AjaxOptions()           {               Confirm="你确认这么做吗?",               HttpMethod="post",               OnSuccess