zoukankan      html  css  js  c++  java
  • JavaWeb学习之XStream AJAX省市联动(数据格式:XML)

    一、XStream作用

      XStream可以把JavaBean对象和XML字符串互相转换

    二、XStream应用

    ①、下载jar文件,并导入到工程

      没找到下载的网站就自己分享链接: https://pan.baidu.com/s/1XVDZEiweqByNa2yruFMJ9w 提取码: hkv9

      导入这两个jar文件

     ②、数据准备

      

    ③、JavaBean转XML

     1 @Override
     2 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     3     try {
     4         int pId = Integer.parseInt(req.getParameter("pId"));
     5         System.out.println(pId);
     6         ICityDao dao = new CityDaoImpl();
     7         List<City> list = dao.getCities(pId);
     8         for (City city : list) {
     9         System.out.println(city.toString());
    10         }
    11         // XStream的使用
    12         XStream xStream = new XStream();
    13  
    14         // 想把Id做成属性
    15         xStream.useAttributeFor(City.class, "Id");
    16 
    17         // 设置别名
    18         xStream.alias("city", City.class);
    19 
    20         // 转化一个对象成xml字符串
    21         String xml = xStream.toXML(list);
    22         
    23         resp.setContentType("text/xml;charset=utf-8");
    24         resp.getWriter().write(xml);
    25 
    26     } catch (SQLException e) {
    27 
    28         e.printStackTrace();
    29     }
    30  }

      打印xml字符串

     1 <list>
     2 <!--如果不修改节点别名xStream.alias("city", City.class); 节点名com.city.domain.City-->
     3   <city Id="1"><!--xStream.useAttributeFor(City.class, "Id"); 把Id设置为节点属性-->
     4     <pId>1</pId>
     5     <Name>石家庄</Name>
     6   </city>
     7   <city Id="2">
     8     <pId>1</pId>
     9     <Name>唐山</Name>
    10   </city>
    11   <city Id="3">
    12     <pId>1</pId>
    13     <Name>秦皇岛</Name>
    14   </city>
    15   <city Id="4">
    16     <pId>1</pId>
    17     <Name>邯郸</Name>
    18   </city>
    19 </list>

    ④、Jquery操作XML

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <!DOCTYPE html>
     4 <html>
     5 <head>
     6 <meta charset="UTF-8">
     7 <title>Insert title here</title>
     8 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
     9 <script type="text/javascript">
    10 $(function() {
    11     //1.找到省份的元素
    12     $("#province").change(function() {
    13         //2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据
    14         var pid = $(this).val();
    15         $.post( "CityServlet",{pId:pid} ,function(data,status){
    16             //先清空以前的值:
    17             $("#city").html("<option value='' >-请选择-")
    18             //遍历: 
    19             //从data数据里面找出所有的city  , 然后遍历所有的city。
    20             //遍历一个city,就执行一次function方法
    21             $(data).find("city").each(function() {
    22                 /* <city Id="3">
    23                      <pId>1</pId>
    24                      <Name>秦皇岛</Name>
    25                    </city> 
    26                   */
    27                 //遍历出来的每一个city,属性Id,区分大小写
    28                 var id = $(this).attr("Id");
    29                 //var id =$(this).children("id").text();
    30                 //遍历出来的每一个city,子节点name,不区分大小写
    31                 var cname = $(this).children("name").text();
    32                 
    33                 $("#city").append("<option value='"+id+"' >"+cname)
    34             });
    35         } );
    36         
    37     });
    38 });
    39 </script>
    40 </head>
    41 <body>
    42 
    43     省份:
    44     <select name="province" id="province">
    45         <option value="">-请选择 -
    46         <option value="1">河北
    47         <option value="2">山西
    48         <option value="3">江苏
    49         <option value="4">安徽
    50     </select> 
    51     城市:
    52     <select name="city" id="city">
    53         <option value="">-请选择 -
    54     </select>
    55 </body>
    56 </html>

    三、总结

      XStream的toXML方法:将JavaBean对象转换XML字符串

      XStream的fromXML方法:XML转换JavaBean对象

      服务器和客户端数据传输的方式:xml,json

  • 相关阅读:
    JS分页条插件
    C#Lambda
    常用CSS样式速查
    简易表格编辑器
    使用template
    js 时间类函数
    数据库表增删查改帮助类
    使用github
    box-shadow属性
    box-sizing属性
  • 原文地址:https://www.cnblogs.com/WarBlog/p/12599994.html
Copyright © 2011-2022 走看看