大学生二手交易网站：注册界面学校的选择； 市校二级联动xml&ajax&jQuery&MySql-------（2）

 实现效果：

servlet层

        //新认识xStream
        XStream xStream = new XStream();
        
        //将类完整路径替代成另一个字符串
        xStream.alias("school",School.class );
        
        //将类中的的某个属性 设置成它xml格式中的id
        xStream.useAttributeFor(School.class, "sid");    

        //对象序列化成xml格式

        String xml = xStream.toXML(list);       

        //反序列化为对象

        Object obj = xStream.fromXML(xml);

        //设置请求转发格式为xml！
        response.setContentType("text/xml;charset=utf-8");

xml格式  返回的是：[object XMLDocument] (可以自己在jsp页面中alert（data）试验)     

XML  可扩展标记语言被设计用来描述数据，其焦点是数据的内容。

HTML被设计用来显示数据，其焦点是数据的外观

text/html-------  text/xml----
        response.getWriter().write(xml);

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		int cid = Integer.parseInt(request.getParameter("cid"));
		
		SchoolDao schoolDao = new SchoolDaoImp();
		List<School> list = schoolDao.findSchool(cid);

		XStream xStream = new XStream();

		xStream.alias("school",School.class );

		xStream.useAttributeFor(School.class, "sid");
		
		String xml = xStream.toXML(list);
		
		response.setContentType("text/xml;charset=utf-8");
		response.getWriter().write(xml);
	}

 

JSP界面

        success:function(data){
                    $("#school").html("<option value=''>"+"---请选择---"+"</option>")
                    console.log(data);
                    /**得到的data是xml格式的数据是list
                     <list>
                        <school sid="1">
                            <sname>湖南工业大学</sname>
                        </school>
                    </list>
                    我们需要的是sname   ------》jQuery遍历
                    */
                    $(data).find("school").each(function(){
                        //   找到所有的school  遍历出里所有的school  然后都执行这个function方法
                        var sid = $(this).attr("sid");
                        // 获取当前元素的属性值
                        var sname = $(this).children("sname").text();
                        //当前的school                                     .text()拿两个元素中间的值
                        $("#school").append("<option value='"+sid+"'>"+sname+"</option>")
                        //                         外部有双引号此处要改成单引号
                    })
                }

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#city").change(function(){
			$("#school").html("<option value=''>"+"---请选择---"+"</option>")
			var cid = $(this).val();
			$.ajax({
				method:"POST",
				url:"SchoolServlet",
				data:{
					"cid":cid
				},
				success:function(data){
					$(data).find("school").each(function(){
						var sid = $(this).attr("sid");
						var sname = $(this).find("sname").text();
						alert(sid+sname);
						$("#school").append("<option value='"+sid+"'>"+sname+"</option>")
					})
				}
			});
		})
		$("#school").change(function(){
			alert($("#school").val());
		})
	})
</script>

 

我其中用的是  var sname = $(this).find("sname").text(); 

var sname = $(this).children("sname").text(); 

children()方法查找的是孩子。（仅儿子辈）。

find()方法查找的是子孙后代，遍历当前元素集合中每个元素的后代。