jquery处理服务器返回XML和JSON数据
实体类UserInfo：package yu.entity;/** * 2011-3-18 11:00:28 * @author xiaoyuming * *用户实体类 */public class UserInfo {private String UserName;private String sex;private int age;private String hobby;public UserInfo() {super();}public String getUserName() {return UserName;}public void setUserName(String userName) {UserName = userName;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getHobby() {return hobby;}public void setHobby(String hobby) {this.hobby = hobby;}public UserInfo(String userName, String sex, int age, String hobby) {super();UserName = userName;this.sex = sex;this.age = age;this.hobby = hobby;}}
XML数据处理方式：
后台Servlet：
package ym.Servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import yu.entity.UserInfo;public class XmlServlet extends HttpServlet {/** * */public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}/*** **/public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");String title=request.getParameter("title");response.setContentType("text/xml;charset=UTF-8");List<UserInfo> list=new ArrayList<UserInfo>();UserInfo user=new UserInfo("张三","男",22,"看电视");list.add(user);UserInfo user1=new UserInfo("张1","女",12,"打篮球");list.add(user1);UserInfo user2=new UserInfo("张2","男",32,"开车");list.add(user2);UserInfo user3=new UserInfo("张3","女",12,"画画");list.add(user3);UserInfo user4=new UserInfo("张4","男",14,"登山");list.add(user4);StringBuffer sf=new StringBuffer();sf.append("<message>");if (title!="") {for (int i = 0; i < list.size(); i++) {UserInfo U=list.get(i);String head="<User>";String author="<name>"+U.getUserName()+"</name>";String sex="<sex>"+U.getSex()+"</sex>";String age="<age>"+U.getAge()+"</age>";String hobby="<hobby>"+U.getHobby()+"</hobby>";String foot="</User>";sf.append(head);sf.append(author);sf.append(sex);sf.append(age);sf.append(hobby);sf.append(foot);}sf.append("</message>");System.out.println(sf.toString());response.getWriter().println(sf.toString());}}}
处理XML数据的前台JSP页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>XML数据格式返回 jquery 处理</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){$("#word").keyup(function(event){var myevent=event||window.event;var keyCode=myevent.keyCode;if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){var wordText=$("#word").val();if(wordText!=""){$.ajax({url:"XmlServlet",data:{title:wordText},type:"post",dataType:"xml",success:function(data){//将dom对象转化为jquery对象var jqueryObj=$(data);//查询节点var Messages=jqueryObj.find("User");$("#auto").html("");Messages.each(function(i){var divnode=$("<div>").attr("id",i);var name=$(this).find("name").eq(0).text();var sex=$(this).find("sex").eq(0).text()var age=$(this).find("age").eq(0).text();var hobby=$(this).find("hobby").eq(0).text();divnode.html("名称："+name+"性别："+sex+"年龄："+age+"爱好："+hobby);divnode.appendTo($("#auto"));})}})}else{$("#auto").html("");}}})})</script></head><body><h4>XML数据格式返回处理</h4><br><input type="text" id="word"><input type="button" value="查询"><div id="auto"></div></body></html>
Json格式处理方式：
后台json格式的Servlet：
package ym.Servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import yu.entity.UserInfo;public class JsonServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");String title=request.getParameter("title");response.setContentType("text/json;charset=UTF-8");List<UserInfo> list=new ArrayList<UserInfo>();if (title!="") {UserInfo user=new UserInfo("张三","男",22,"看电视");list.add(user);UserInfo user1=new UserInfo("张1","女",12,"打篮球");list.add(user1);UserInfo user2=new UserInfo("张2","男",32,"开车");list.add(user2);UserInfo user3=new UserInfo("张3","女",12,"画画");list.add(user3);UserInfo user4=new UserInfo("张4","男",14,"登山");list.add(user4);//将list集合转化为json格式的数据String json=JSONArray.fromObject(list).toString();System.out.println(json);//输出response.getWriter().println(json);}}}
前台json页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>JSON数据格式返回客户端jquery 处理</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){$("#word").keyup(function(event){var myevent=event||window.event;var keyCode=myevent.keyCode;if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){var wordText=$("#word").val();if(wordText!=""){$.ajax({url:"JsonServlet",data:{title:wordText},type:"post",dataType:"json",success:function(data){//将dom对象转化为jquery对象var jqueryObj=$(data);//alert(jqueryObj);//alert(data);jqueryObj.each(function(i,item){var newdiv=$("<div>").attr("id",i);newdiv.html("姓名："+data.userName+"性别："+data.sex+"年龄："+data.age+"爱好："+data.hobby);newdiv.appendTo($("#auto"));})}})}else{$("#auto").html("");}}})})</script></head> <body> <input type="text" id="word"><input type="button" value="查询"> <div id="auto"></div></body></html>
注：使用的json jar包,还有jquery类库见附件：
页:
[1]