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

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

    博客分类：
  • java
XMLjsonjQueryServletJavaScript 
阅读更多

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

 

 

 

 

分享到：
| MyEclipse JSP页面中文字符不能保存
评论
1 楼 sunnxxy 2011-09-29  


好全~谢谢分享
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.json2xml.js和jquery.xml2json.js

    总之，`jquery.json2xml.js` 和 `jquery.xml2json.js` 是jQuery的两个强大工具，它们使开发者能够轻松地在JSON和XML之间进行转换，从而更好地适应不同的数据处理需求。在实际项目中，它们可以极大地提高开发效率，...

    jQuery xml-to-json xml转JSON插件

    总之，jQuery xml-to-json插件为开发者提供了一种便捷的方式来在jQuery环境中处理XML数据，将其转换为JSON，从而简化前端的数据操作和呈现。通过学习和运用这个插件，可以提升项目的开发效率，同时增强前后端数据...

    Jquery xml2Json

    在Web应用程序中，尤其是在使用jQuery框架的时候，这样的转换工具非常实用，因为JavaScript和jQuery天生更擅长处理JSON结构的数据，而不是XML。 这个插件的工作原理通常是遍历XML文档的节点，然后将这些节点转化为...

    jquery xml转json插件

    这个插件特别适用于处理那些由服务器返回的XML数据，尤其是当服务器无法直接提供JSON格式的情况下。 首先，让我们来看看这个插件的核心功能。它提供了一个简单的API，允许开发者通过调用一个函数，将XML字符串或DOM...

    jquery-xmlToJson.js

    在实际应用中，这个插件特别适用于那些需要处理XML数据的Web应用，例如从服务器获取XML格式的API响应，然后在客户端进行进一步的处理和展示。它简化了XML数据的解析和操作，提高了开发效率。 总结来说，"jquery-xml...

    xml-to-json.rar_XML to JSON _jquery.xml2json.js_xml json_xml to

    XML（Extensible Markup Language）和JSON...了解如何使用这个插件以及XML和JSON之间的转换原理，对于进行跨平台的数据交换和处理至关重要。在实际项目中，要根据具体需求选择合适的转换方法，并注意性能优化。

    使用jQuery读取xml和json的案例代码

    在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM...总的来说，jQuery使得在JavaScript中处理XML和JSON数据变得简单易行，大大提高了开发效率。理解并熟练运用这些技术，能让你在Web开发中更加得心应手。

    xml2json.zip

    这种工具允许用户在浏览器中上传XML文件，服务器端的PHP脚本接收并处理这些文件，然后返回转换后的JSON数据。这种方式方便了开发者在没有本地环境时进行数据格式转换。 "language"目录可能包含了一些多语言支持的...

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

    在JavaScript和前端开发中，jQuery库提供了一种方便的方式来处理XML和JSON数据，尤其是在与服务器进行异步交互（Ajax）时。本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先，让我们来看...

    JQuery+AJAX处理XML数据

    **jQuery + AJAX 处理 XML 数据** 在网页开发中，jQuery 和 AJAX 技术的...总之，jQuery 结合 AJAX 能够有效地处理 XML 数据，实现页面与服务器的无缝交互。熟练掌握这些技巧，对于提升网页应用的用户体验至关重要。

    原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式

    然后，服务器返回的JSON或XML数据会被解析并填充到二级选择框中。 在解析XML数据时，JavaScript提供了DOM解析器，可以将XML字符串转换为DOM树结构，通过遍历节点来获取数据。例如，`document.createElement()`、`...

    jQuery中对异步提交JSON和XML数据的处理方式

    针对JSON和XML这两种数据格式，jQuery提供了多种处理方式。下面将详细讲解如何使用jQuery处理这两种数据类型。 首先，jQuery中的AJAX请求主要有三种基本方法：`$.post()`, `$.get()` 和 `$.ajax()`。这些方法都可以...

    xml-to-json.zip_delphi xml转json_xml 2 JSON

    Delphi是一款强大的面向对象的编程环境，它支持多种编程任务，包括处理XML和JSON数据。在Delphi中，开发者可以使用内置的XML DOM库来解析和操作XML文档，同时也可以利用第三方库或自定义代码来实现XML到JSON的转换。...

    XML与JSON相互转化

    XML与JSON之间的转换通常在需要在支持XML的系统（如服务器端处理）和JavaScript驱动的客户端应用（更倾向于JSON）之间进行数据交互时发生。转换过程包括两个主要步骤：XML到JSON的序列化和JSON到XML的反序列化。 ...

    关于jquery ajax 调用带参数的webservice返回XML数据一个小细节.docx

    这样，jQuery会自动处理数据的序列化，使其适合Web Service的预期格式。 在Web Service端，你需要一个可以接受这些参数的方法。例如，一个ASP.NET的Web Method可以如下定义： ```csharp [WebMethod] public DataSet...

    jquery AJAX 回调函数取JSON成功代码

    当我们在AJAX请求中处理JSON数据时，通常会设置`dataType`参数为'json'，以指示服务器返回的数据类型。 以下是一个简单的jQuery AJAX回调函数获取JSON数据的示例代码： ```javascript $.ajax({ url: 'your_data_...

    详谈 Jquery Ajax异步处理Json数据.

    通过以上的知识点，可以了解到在Jquery Ajax异步处理JSON数据的过程中，开发者需要了解前端如何发送请求、指定期望的响应数据类型、以及如何在回调函数中处理服务器返回的JSON格式数据。这种机制使得Web应用可以提供...

    struts2+jquery执行ajax并返回json类型数据（源码）

    在本示例中，Struts2将处理来自jQuery的Ajax请求，并返回JSON格式的响应数据。 jQuery则是一个轻量级的JavaScript库，简化了DOM操作、事件处理和Ajax交互。在本例中，jQuery的`$.ajax()`方法用于发起异步请求，获取...

    jquery与java交互通过json传递数据的经典实例

    在jQuery中，AJAX（异步JavaScript和XML）用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。虽然名称中含有XML，但实际应用中，JSON（JavaScript Object Notation）已经成为更常用的数据交换格式，...

Magicbox
Global site tag (gtag.js) - Google Analytics