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对象
            xStream.alias("city", City.class);//设置将对象的全路径替换为你指定的字符串
            //如果不做下面的设置,那么转换为xml后,对象和对象成员变量的关系如同xml中父标签和子标签的关系;
            //如下设置为转换为xml后,对象和对象成员变量的关系如果xml中一个标签中有多个属性的关系;
            //xStream.useAttributeFor(City.class, "cname");//设置对象目标成员变量转换后为xml中标签属性。
            //xStream.useAttributeFor(City.class, "cid");
            String xmlStr = xStream.toXML(list);
            //这里设置为text/xml;那么前端页面回响的数据类型就为[object XMLDocument]
            //倘若这里设置为text/html,那么前端就是html标签即字符串
            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().print(xmlStr);

在客户端解析xml文件:

 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}/CitysServlet",{"pid":pid},function(data){
12                 alert(data);
13                 $("#city").html("<option>-请选择市-</option>");
14                 $(data).find("city").each(function(){
15                     var cid = $(this).children("cid").text();
16                     var cname = $(this).children("cname").text();
17                     $("#city").append("<option value = ‘"+cid+"‘>"+cname+"</option>");
18                 });
19             });
20         });
21     });
22
23 </script>
24 <body>
25     <form>
26         <select id="province">
27             <option>-请选择省-</option>
28             <c:forEach var="i" items="${ list }">
29                 <option value="${ i.pid }">${ i.pname }</option>
30             </c:forEach>
31         </select>
32         <select id = "city">
33
34         </select>
35     </form>
36 </body>
37 </html>

    

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

时间: 2024-09-28 09:54:03

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

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

json概述:javascript object notation 是一种轻量级的数据交换格式.json本质上就是一种数据格式的字符串:javascript可以直接解析json,因为json本身就是一种原声的javascript数据格式.(json就是js里面的一个数组或者对象) json语法规则: 数据在键值对中: 数据由逗号分隔: 花括号保存对象: 方括号保存数组: json值可以是: 数字(正数或浮点数): 字符串(在双引号中): 逻辑值(true或false): 数组(在方括号中): 对

通过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}); // 异步发

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

MVC&amp;WebFomr对照学习:ajax异步请求

写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认为虽然mvc和webform有诸多不同,但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已.更何况它们都是基于asp.net框架的.因此在解决mvc开发过程中的问题时,我很容易联想到在webform下同样的问题是如何解决的.以此来作为对照.我姑且把这种方法叫做迁移学习法吧.我以"小孩之