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[i].userName+" 性别："+data[i].sex+" 年龄："+data[i].age+" 爱好："+data[i].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类库见附件：