AJAX通过XML获取对象和数组的属性
model层
public class Dog { private String name; private int age; private String owner; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getOwner() { return owner; } public void setOwner(String owner) { this.owner = owner; } }
实例1：获取对象的属性
controller层
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); //模拟从数据库查询 Dog d = new Dog(); d.setName("erha"); d.setAge(1); d.setOwner("zhang"); //打成XML往回传 response.getWriter().append("<?xml version='1.0'?>"); response.getWriter().append("<dog>"); response.getWriter().append("<name>"+d.getName()+"</name>"); response.getWriter().append("<age>"+d.getAge()+"</age>"); response.getWriter().append("<owner>"+d.getOwner()+"</owner>"); response.getWriter().append("</dog>"); }
view层
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ss").click(function(){ $.ajax({ url:"testobject", data:{}, type:"post", dataType:"xml", success:function(httpdata){ //解析返回来的httpdata var n = $(httpdata).find("name").text(); var a = $(httpdata).find("age").text(); var o = $(httpdata).find("owner").text(); //把数据显示在页面的元素上#hh $("#hh").append("<li>"+n+"</li>"); $("#hh").append("<li>"+a+"</li>"); $("#hh").append("<li>"+o+"</li>"); } }); }); }); </script> </head> <body> <span id="ss">获取对象</span> <ul id="hh"> </ul> </body> </html>
实例2：获取数组元素的属性
controller
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); //模拟从数据库查询 Dog d1 = new Dog(); d1.setName("ha"); d1.setAge(1); d1.setOwner("ha"); Dog d2 = new Dog(); d2.setName("jin"); d2.setAge(2); d2.setOwner("jin"); Dog d3 = new Dog(); d3.setName("luo"); d3.setAge(3); d3.setOwner("luo"); ArrayList<Dog> list = new ArrayList<Dog>(); list.add(d1); list.add(d2); list.add(d3); response.getWriter().append("<?xml version='1.0'?>"); response.getWriter().append("<pet>"); for(Dog d:list){ response.getWriter().append("<dog>"); response.getWriter().append("<name>"+d.getName()+"</name>"); response.getWriter().append("<age>"+d.getAge()+"</age>"); response.getWriter().append("<owner>"+d.getOwner()+"</owner>"); response.getWriter().append("</dog>"); } response.getWriter().append("</pet>"); }
view
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ss").click(function(){ $.ajax({ url:"testlist", data:{}, type:"post", dataType:"xml", success:function(httpdata){ var dogs = $(httpdata).find("dog");//数组 var tb = $("#tb"); for(var i=0;i<dogs.length;i++) { var n = $(dogs).eq(i).find("name").text(); var a = $(dogs).eq(i).find("age").text(); var o = $(dogs).eq(i).find("owner").text(); var tr = "<tr>"; tr += "<td>"+n+"</td>"; tr += "<td>"+a+"</td>"; tr += "<td>"+o+"</td>"; tr += "</tr>"; $(tb).append(tr); } } }); }); }); </script> </head> <body> <span id="ss">获取列表</span> <table id="tb" width=100% cellpadding="5" cellspacing='1' > </table> </body> </html>
实例3：获取数组元素的属性（xml标签内包含属性标签）
controller
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //模拟从数据库查询 Dog d1 = new Dog(); d1.setName("ha"); d1.setAge(1); d1.setOwner("ha"); Dog d2 = new Dog(); d2.setName("jin"); d2.setAge(2); d2.setOwner("jin"); Dog d3 = new Dog(); d3.setName("luo"); d3.setAge(3); d3.setOwner("luo"); ArrayList<Dog> list = new ArrayList<Dog>(); list.add(d1); list.add(d2); list.add(d3); response.getWriter().append("<?xml version='1.0'?>"); response.getWriter().append("<pet>"); for(Dog d:list){ response.getWriter().append("<dog name='"+d.getName()+"'>");//<dog name=?> response.getWriter().append("<age>"+d.getAge()+"</age>"); response.getWriter().append("<owner>"+d.getOwner()+"</owner>"); response.getWriter().append("</dog>"); } response.getWriter().append("</pet>"); }
view
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ss").click(function(){ $.ajax({ url:"testlist2", data:{}, type:"post", dataType:"xml", success:function(httpdata){ var dogs = $(httpdata).find("dog");//数组 var tb = $("#tb"); for(var i=0;i<dogs.length;i++){ var n = $(dogs).eq(i).attr("name");//从同一级标签查找用attr var a = $(dogs).eq(i).find("age").text(); var o = $(dogs).eq(i).find("owner").text(); var tr = "<tr>"; tr += "<td>"+n+"</td>"; tr += "<td>"+a+"</td>"; tr += "<td>"+o+"</td>"; tr += "</tr>"; $(tb).append(tr); } } }); }); }); </script> </head> <body> <span id="ss">获取列表</span> <table id="tb" width=100% cellpadding="5" cellspacing="1"> </table> </body> </html>
