JQuery实现AJAX异步请求实现省市联动（数据传输格式为xml）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JQuery实现AJAX异步请求实现省市联动（数据传输格式为xml）的主要内容，如果未能解决你的问题，请参考以下文章
javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）