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

最新推荐文章于 2024-07-24 11:38:03 发布
最新推荐文章于 2024-07-24 11:38:03 发布
阅读量154 收藏
点赞数
分类专栏： java 文章标签： XML json jQuery Servlet JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ASshowmeinchina/article/details/83874188
版权

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

 

 

 

 

ASshowmeinchina
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对于服务器返回的JSON字符串，如果 jQuery 异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理
水土不服的博客
11-27 508
对于服务器返回的JSON字符串，如果 jQuery 异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于 eval()中执行一次。这种方式也适合以普通 javascipt 方式获取 json 对象，以下举例说明： var u = eval('('+user+')'); 为什么要 eval 这里要添加 ('('+user+')') 呢？
AJAX 学习笔记[四] AJAX 对服务器返回的XML 的处理
weixin_33752045的博客
08-07 134
  在AJAX 中，服务器端如果返回的XML 文档，则可以通过异步对象的responseXML 属性来获取器XML 数据。而开发者可以利用DOM 的相关方法对其进行处理。   假设服务器返回的XML 文档，如下所示： &lt;?xml version="1.0" encoding="gb2312"?&gt...
用jquery操作xml文件
服务器端攻城师
01-04 2296
一、 xml文件\内容读取 1、读取xml文件$.get( xmlfile.xml , function (xml){ //xml即为可以读取使用的内容，具体读取见第2点 });2、读取xml内容 如果读取的xml是来于xml文件，这结合上面的那点，处理如下 $.get( xmlfile.xml ,function (xml){ $(xml). fi 一、xml文件\内容读取 1、读取
Java后台发送post请求，并接收返回信息
Java_Long_Asus的博客
09-30 6747
/** * 向指定的 URL发送远程POST方法的请求 * @param url发送请求的 URL * @param json请求参数， * @return 所代表远程资源的响应结果 */ public static JSONObject sendPost(String url, JSON json) { PrintWriter out = null; Bu...
Jquery ajax方法解析返回的json数据读取undefined的解决办法
老蔡学代码
06-21 3154
最近在用jquery的ajax方法传递接收json数据时发现一个问题，那就是返回的data数据，有时候可以直接作为json数据使用，具体元素可以用data.name获取。可有时候又不行。直接显示undefined。这简直就是一个坑啊。网上查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data)...
jquery 解析返回的xml和json
bit-cafe
08-09 4228
一、jquery 解析ajax请求返回的xml格式的数据 1、发送ajax请求 function  jqxml(){     $.ajax({         url:"http://localhost:18080/servlet/Servlet1",          // 请求方式         type:"post",         // 服务器返回的数据的格式，
JQuery前端如何操作JSON
hdxx2022的博客
03-11 865
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
jquery的ajax异步请求接收返回json数据
wenjiusui8083的博客
01-22 1191
jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。 代码示例如下： 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",        
jQuery解析返回的xml和json方法详解
10-20
在JavaScript和前端开发中，jQuery库提供了一种方便的方式来处理XML和JSON数据，尤其是在与服务器进行异步交互（Ajax）时。本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先，让我们来看...
jQuery解析与处理服务器端返回xml格式数据的方法详解
10-22
在本文中，我们将深入探讨如何使用jQuery解析和处理服务器端返回的XML格式数据，这通常涉及到Ajax请求和XML文档的解析。 首先，让我们看一个简单的PHP示例（1.php）： ```php header("Content-Type:text/xml; ...
JQuery处理json与ajax返回JSON实例代码
10-26
在jQuery中，处理JSON数据通常涉及到两个主要步骤：获取JSON数据和解析JSON数据。首先，通过AJAX请求从服务器获取JSON格式的响应。AJAX允许在不刷新整个页面的情况下与服务器进行异步通信。jQuery提供了$.ajax()方法...
Jquery通过ajax请求NodeJS返回json数据实例
10-21
3. **灵活的数据格式**：Node.js与jQuery组合支持多种通信数据格式，如XML、JSON和二进制，能够适应各种平台和应用场景。 接下来，我们详细介绍实现这一功能的具体步骤： **一、Node.js服务器设置** 在Node.js中...
Ajax post 请求后端，server返回Map结果集
01-22 4187
一、应用场景 当前端发出Ajax请求，后端需要返回Map结果集 二、代码 1、ResultFactory.java package com.XXXX.tv.vrs.service.util; import java.util.HashMap; import java.util.Map; public class ResultFactory { public static
本地部署SearXNG
m0_62458145的博客
07-23 462
当您安装 SearXNG 时，默认的输出格式是 HTML 格式。请将以下行添加到 settings.yml 文件中。如前面的示例所示，settings.yml 文件位于 ${PWD}/searxng/settings.yml。SearXNG 是一个免费的互联网元搜索引擎，整合了各种搜索服务的结果。用户不会被跟踪，也不会被分析。中填写访问地址，例如：http://x.x.x.x:8080，如果你想通过其他方式安装 SearXNG，请参考。3. 在 Dify 中集成 SearXNG。
python—爬虫爬取视频样例
2301_77698138的博客
07-21 755
下面是一个使用Python爬虫爬取视频的基本例子。创建一个Python爬虫来爬取视频通常涉及到几个步骤：发送HTTP请求、解析网页内容、提取视频链接、下载视频文件。这段代码的主要目的是从网站获取一个视频的视频流和音频流，并将它们分别保存到本地文件中。
HTTP请求入参类型解读
最新发布
Bekind2010的专栏
07-24 903
在HTTP请求中，请求头用于指示资源的MIME类型，即请求体的媒体类型。它告诉服务器实际发送的数据类型是什么，以便服务器能够正确地解析和处理这些数据。可以有多种值，每种值都对应着不同的媒体类型。以下是一些常见的?enctypeenctypeform-datatext/plaintext/plaintext/htmltext/htmltext/xmltext/xmltext/xml每种都对应着不同的数据格式和用途，选择合适的对于确保数据被正确解析和处理至关重要。
Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改
Zorro的博客
07-23 215
【代码】Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改。
深入理解Spring Boot中的Fastjson
fudaihb的博客
07-22 1018
Fastjson是阿里巴巴开源的一个高性能的JSON处理库，因其速度快、功能强大且易用性高而被广泛使用。Spring Boot作为目前流行的微服务框架，也提供了与Fastjson的无缝集成。本文将深入探讨如何在Spring Boot中使用Fastjson，涵盖安装配置、基本用法、进阶技巧以及一些实际应用场景。
jQuery调用JSON与XML数据详解
"jQuery权威指南(第2版)7章主要涵盖了如何在jQuery中调用和处理JSON与XML数据，包括基本概念、数据格式、解析方法以及实际应用案例。" 在jQuery中，JSON数据的调用是通过全局函数`getJSON()`来实现的，这个函数在第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值