• 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>

        

  • 相关阅读:
    ORACLE数据库逐步解决ORA-12541、ORA-01034和ORA-27101、ORA-00119和ORA00132的过程
    Windows下MySQL主从复制的配置
    Windows下Git的使用
    spring boot 2 集成JWT实现api接口认证
    spring boot 2 全局统一返回RESTful风格数据、统一异常处理
    spring boot 2 + shiro 实现权限管理
    Java 密码加盐
    Java中往zip压缩包追加文件
    IntelliJ IDEA 安装、配置和使用Lombok插件
    大规模微服务单元化与高可用设计
  • 原文地址:https://www.cnblogs.com/laodang/p/9523054.html
Copyright © 2020-2023  润新知