`
yuming.xiao
  • 浏览: 19488 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

jquery处理服务器返回XML和JSON数据

    博客分类:
  • java
阅读更多

实体类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类库见附件:

 

 

 

 

分享到:
评论
1 楼 sunnxxy 2011-09-29  


好全~谢谢分享

相关推荐

    jQuery解析返回的xml和json方法详解

    本文实例讲述了jQuery解析返回的xml和json方法。分享给大家供大家参考,具体如下: 一、jQuery 解析ajax请求返回的xml格式的数据 1、发送ajax请求 [removed] function jqxml(){ $.ajax({ url:...

    Jquery通过ajax请求NodeJS返回json数据实例

    3.通信数据格式灵活,可以是xml、json、binary等,数据适合任何平台。 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘...

    AJAX和jQuery动态加载数据的实现方法

    简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容。 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服务器发送...

    jquery电子文档chm

    "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。...

    jquery-1.1.3 效率提高800%

    有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...

    xml-parser:将 xml 或 html 转换为 json 对象的简单 xml 解析器

    xml解析器将 xml 或 html 转换为 json 对象的简单 xml 解析器。 核心解析器可以在客户端和服务器端运行。 有两个预包作为节点模块和 jquery 插件。 xpath 和 json 路径将被添加为使用此数据的实用程序。

    基于jQuery的控件源码

    XML 数据源 是Xml数据源的实例,效果和前者基本一致,只是数据源不同 格式化Table 是将一个已经存在的Html表格格式化成一个flexigrid Style Table 访问数据库 是一个连接数据库的实例数据源为Json。演示...

    c#常用的Datable转换为json,以及json转换为DataTable操作方法

    c#常用的Datable转换为json,以及json转换为DataTable操作方法 ... * 学习和讨论有关asp.net mvc ,Ajax ,jquery ,html/css, xml ,sqlserver ,wpf,IIS以及服务器的搭建和安全性相关技术的交流和学习。

    通过Jquery遍历Json的两种数据结构的实现代码

    在ajax交互中,我们从服务器端返回的数据类型有xml,html,script,json,jsonp,text,本文以json为例,讲述了在前台如何利用jquery遍历json的两种数据结构:“名称/值”对的集合,值的有序列表,以及值的有序列表里面...

    JQuery实现ajax上传文件示例源码20121029

    url用来指定后台处理的程序,fileElementId指的是文件选择框的ID,dataType用来指定返回的数据格式,支持xml、script、json和html。 返回的json的格式最简单:{error:'errormsg',msg:'successmsg'},看后台代码就...

    jquery插件使用方法大全

    (详情可以参见:jQuery.ajax文档) 此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。 2. 延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是...

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...

    jquery实现ajax小例子

    使用jquery实现XML与JSON同服务器的通信 提供了很多个常见的Ajax特效,学习这几个特效能助您学习jquery 项目中已有相关的包及工具,导入MyEclipse后可直接使用 jquery-1.7.js; JSON解析工具:fastjson-1.1.8.jar

    使用jQuery+HttpHandler+xml模拟一个三级联动的例子

    昨天同学问我有关如何快速读取多层级xml文件的问题,于是我就使用省、市、县模拟了一个三级联动的例子,客户端使用jQuery实现异步加载服务器返回的json数据,服务器端则使用XPath表达式查询数据。

    超实用的jQuery代码段

    8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章...

    jQuery详细教程

    jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...

    jQuery ajax dataType值为text json探索分享

    代码如下: &lt;dt xss=removed&gt;dataType 类型:String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML &lt;/dt&gt;&lt;dt style=”margin:15px 0...

    jQuery权威指南366页完整版pdf和源码打包

    6.1.2 jquery中的load()方法 6.1.3 jquery中的全局函数getjson() 6.1.4 jquery中的全局函数getscript() 6.1.5 jquery中异步加载xml文档 6.2 请求服务器数据 6.2.1 $.get()请求数据 6.2.2 $....

Global site tag (gtag.js) - Google Analytics