jQuery+ajax+xml

最新推荐文章于 2023-10-03 06:13:45 发布
残缺的孤独
最新推荐文章于 2023-10-03 06:13:45 发布
阅读量1.1k
点赞数
分类专栏：前端文章标签： jquery ajax function string table html
本文链接：https://blog.csdn.net/yyywyr/article/details/6962409
版权
前端专栏收录该内容
17 篇文章 1 订阅
订阅专栏

2.前段页面代码
 <body id="theBody">
  <select id="name">
  	<option value="zhangsan">zhangsan</option>
  	<option value="lisi">lisi</option>
  </select>
   <input type="button" id="button1" value="get content from server">
  </body>


 
3.javaBean--Person
 
public class Person {
	private int id;
	private String name;
	private int age;
	private String address;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	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 getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
}

4.服务器端代码--XMLServlet
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String name = req.getParameter("name");
		Person person = new Person();
		if("zhangsan".equals(name)){
			person.setId(1);
			person.setName("zhangsan");
			person.setAddress("tianjin");
			person.setAge(23);
		}else{
			person.setId(2);
			person.setName("lisi");
			person.setAddress("beijing");
			person.setAge(30);
		}
		
		//生成XML--DOM4J
		Document document = DocumentHelper.createDocument();
		Element rootElement = document.addElement("users");
		rootElement.addComment("This is a commont");
		Element userElement = rootElement.addElement("user");
		Element idElement = userElement.addElement("id");
		Element nameElement = userElement.addElement("name");
		Element ageElement = userElement.addElement("age");
		Element addressElement = userElement.addElement("address");
		idElement.setText(person.getId()+"");
		nameElement.setText(person.getName());
		ageElement.setText(person.getAge()+"");
		addressElement.setText(person.getAddress());
		
		resp.setContentType("text/html; charset=utf-8"); //设置响应头
		resp.setHeader("pragma", "no-cache"); //无缓存
		resp.setHeader("cache-control", "no-cache"); //无缓存
		
		PrintWriter out = resp.getWriter();
		OutputFormat format = OutputFormat.createPrettyPrint(); //为了方便在firebug里面查
		format.setEncoding("utf-8");
		
		XMLWriter xmlWriter = new XMLWriter(out,format); //写到客户端
		xmlWriter.write(document);
		out.flush();
	}
5.前端页面处理脚本
$("#button1").click(function(){
				$.ajax({ //no need to judge the browser type
					type: "POST", //类型
					url: "XMLServlet", //请求访问的servlet
					dataType: "xml",   
					data: {'name': $("#name").val()}, //传递的参数，获取选择的值
					success: function(returnedData){   //成功返回的回调函数
						//解析传来的XML--jQuery对象
						var id = $(returnedData).find("id").text(); //找到id元素并取其值
						var name = $(returnedData).find("name").text();
						var age = $(returnedData).find("age").text();
						var address = $(returnedData).find("address").text();
						
						//创建表格显示格式
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
						$("#theBody table:eq(0)").remove(); //删除先前的表格
						$("#theBody").append(html);
					}
				});
			});
 
6.前端页面处理脚本--简易形式
$("#button1").click(function(){
			$.post("XMLServlet",
				{
					name:$("#name").val()
				},
				function(returnedData,status){
						//解析传来的XML--jQuery对象
						var id = $(returnedData).find("id").text(); //找到id元素并取其值
						var name = $(returnedData).find("name").text();
						var age = $(returnedData).find("age").text();
						var address = $(returnedData).find("address").text();
						
						//创建表格显示格式
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
						$("#theBody table:eq(0)").remove(); //删除先前的表格
						$("#theBody").append(html);
				}
			);
			});


 


$("#button1").click(function(){
			$.post("XMLServlet",
				{
					name:$("#name").val()
				},
				function(returnedData,status){
						//解析传来的XML--jQuery对象
						var id = $(returnedData).find("id").text(); //找到id元素并取其值
						var name = $(returnedData).find("name").text();
						var age = $(returnedData).find("age").text();
						var address = $(returnedData).find("address").text();
						
						//创建表格显示格式
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
						$("#theBody table:eq(0)").remove(); //删除先前的表格
						$("#theBody").append(html);
				}
			);
			});


 


$("#button1").click(function(){
				$.ajax({ //no need to judge the browser type
					type: "POST", //类型
					url: "XMLServlet", //请求访问的servlet
					dataType: "xml",   
					data: {'name': $("#name").val()}, //传递的参数，获取选择的值
					success: function(returnedData){   //成功返回的回调函数
						//解析传来的XML--jQuery对象
						var id = $(returnedData).find("id").text(); //找到id元素并取其值
						var name = $(returnedData).find("name").text();
						var age = $(returnedData).find("age").text();
						var address = $(returnedData).find("address").text();
						
						//创建表格显示格式
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name></th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></table>";
						$("#theBody table:eq(0)").remove(); //删除先前的表格
						$("#theBody").append(html);
					}
				});
			});