jQuery+ajax+xml

来源：互联网发布：苹果手机优化软件编辑：程序博客网时间：2024/04/29 05:47

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--DOM4JDocument 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 typetype: "POST", //类型url: "XMLServlet", //请求访问的servletdataType: "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 typetype: "POST", //类型url: "XMLServlet", //请求访问的servletdataType: "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);}});});

 
	
					
					   jQuery--AJAX传递xml
	  	   jquery ajax xml 实例
	  	   Jquery Ajax读取xml
	  	   jQuery+ajax+xml
	  	   jQuery parse XML - ajax
	  	   jquery+ajax+json+xml
	  	   Jquery Ajax 读取XML 数据
	  	   Jquery ajax xml dropdownlist 联动
	  	   jquery $.ajax()取xml数据
	  	   Jquery的Ajax读取Xml
	  	   Jquery | ajax 读取xml 文件
	  	   17.jquery ajax与xml
	  	   JQuery -- Jquery 中的Ajax, Jquery解析xml文件
	  	   使用jquery的ajax取xml
	  	   jquery处理xml的ajax方法
	  	   ajax 中用jquery处理xml数据
	  	   Firefox中jQuery.ajax()返回Xml Document
	  	   jQuery-Ajax之加载XML文件
	     		  
	  	   CentOS VPS通过OpenVPN访问互联网
	  	   AC大牛经典语录
	  	   【求解】英文文本中提取其中的单词，从高到低显示单词的使用频率排序，大小写不限
	  	   模板类的友元函数
	  	   面试题目
	  	   jQuery+ajax+xml
	  	   【求解】【正则表达式】判断输入的一个字符串是否是一种常用的URL规范字符串
	  	   [iphone游戏开发]第一篇 下载并安装cocos2d
	  	   写给想当程序员的朋友
	  	   相似图片搜索的原理
	  	   stdin,stdout,stderr转载
	  	   Xenomai-forge Native API概述
	  	   Oracle 表空间介绍
	  	   imote2节点驱动安装与程序装载