分享web开发知识

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

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

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

发布时间:2023-09-06 02:11责任编辑:郭大石关键词: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)

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

知识推荐

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