ajax中解析json数据的各种方法(返回类型为json或text)

最新推荐文章于 2025-07-31 10:27:49 发布

EmineWang

最新推荐文章于 2025-07-31 10:27:49 发布

阅读量3.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： ajax jquery xml json

本文链接：https://blog.youkuaiyun.com/a718515028/article/details/16338015

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何通过AJAX实现浏览器与服务器之间的JSON数据交互，包括构造JSON文本、直接返回JSON对象及利用工具类转换集合为JSON等不同方式，并提供具体示例。

对于json

从servlet中返回给ajax的dataType类型可以是text,json

1、在servlet中构造json文本，再response.getWriter()给ajax，返回json text文本

servlet中，一面一段写在doPost或doGet中，但要相互调用this.doGet(rq,rs)或this.doGet(rq,rs)

用jquery的ajax异步提交，数据必须有一个明确的ID（不再是name，和form提交方式不一样），比如下面jsp中的username就是ID

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                response.setContentType("text/html;;charset=utf-8");//注意要是返回文本，那么类型为text/html
		String username1 = request.getParameter("username");
		String username = URLDecoder.decode(username1,"UTF-8");
		StringBuilder message = new StringBuilder("");
		if(username!=null)
		{
			EmployeeDao employeeDao = new EmployeeDao();
			ArrayList<Employee> employees = employeeDao.select(username);
			
			if(employees!=null&&employees.size()>0)
			{
				 message.append("{\"emp\":[");
//				for(Employee employee: employees)
//				{
				 //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组
//					System.out.println(employee.getEmpNo());
//					message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}");
//				}
				 //为了说明构造json文本，仅使用2条记录
				 message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}");
				 message.append(",");
				 message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}");
				 message.append("]}");
			}
			 PrintWriter out = response.getWriter();
			 out.println(new String(message));
		}

在ajax中

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>


<script type="text/javascript">
function check(){
	var resultNode = $("#result");
	var username = $("#username").val();
	
	$.ajax({
		url:"ShowEmp_ajax_json2",
		type:"POST",
		data:{username:username},
		dataType:"text",
		success:function(data){
			//转换成jquery对象
			var s = "<table border='1' width='100' height='100'>";
// 			若servlet中采用构造的json语句,jsp返回datatype类型为text
			var obj = eval("("+data+")");
                       //这里需要用eval函数，eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
			alert(obj);
			$.each(obj.emp,function(index,element){
				alert(element.ename);
			})
			
			//遍历方法二或者
			$(obj.emp).each(function(index){//注意function写法不一样
				alert(obj.emp[index].eno);
			});
			
			//错误写法
			$(obj).each(function(index){//这样遍历的是obj，obj是根据得到的整条text转换而来，因为只有一个obj，所以index的都是0，obj.emp[index].eno得到的是emp中第0个对象的数据
				alert(obj.emp[index].eno);
			});
			s += "</table>";
			$("#result").html(s);
			
		}
	});
}
</script>
</head>
<body>
	输入用户名<input type="text" id="username" 	/>
	<input type="button" value="查找" onclick="check()" />
	<div id="result" ></div>
</body>
</html>

2、用字符串构造json数据，返回json对象

servlet中返回application/json

ajax中dateType用json

servlet代码，和上面没有什么区别，主要是把contentype改为application/json

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
		String username1 = request.getParameter("username");
		String username = URLDecoder.decode(username1,"UTF-8");
		StringBuilder message = new StringBuilder("");
		
		if(username!=null)
		{
			EmployeeDao employeeDao = new EmployeeDao();
			ArrayList<Employee> employees = employeeDao.select(username);
			
			if(employees!=null&&employees.size()>0)
			{
				 message.append("{\"emp\":[");
//				for(Employee employee: employees)
//				{
				 //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组
//					System.out.println(employee.getEmpNo());
//					message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}");
//					
//				}
				 //为了说明构造json文本，仅使用2条记录
				 message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}");
				 message.append(",");
				 message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}");
				 
				 message.append("]}");
			}
			 	 System.out.println(message);
				 PrintWriter out = response.getWriter();
				 out.println(new String(message));
				
		}
		
		
	}

jsp中代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
function check(){
	var resultNode = $("#result");
	var username = $("#username").val();
	$.ajax({
		url:"ShowEmp_ajax_json2",
		type:"POST",
		data:{username:username},
		dataType:"json",//注意此时这里是json
		success:function(data){
			//转换成jquery对象
			var s = "<table border='1' width='100' height='100'>";
// 			//若servlet中采用构造的json语句，jsp返回类型dataType为json对象
		 	//写法一、
			$.each(data.emp,function(index,element){//element是data.emp json数组之中的数据
// 					alert(element.eno);
					s+="<tr>";
					s += "<td>"+element.eno+"</td>";
					s += "<td>"+element.ename+"</td>";
					s+="</tr>";
			});
			//写法二、
			$(data.emp).each(function(index){//将data.emp转换成jquery对象遍历
				alert(data.emp[index].eno);
			}); 
			s += "</table>";
			$("#result").html(s);
		}
	});
}
</script>
</head>
<body>
	输入用户名<input type="text" id="username" 	/>
	<input type="button" value="查找" onclick="check()" />
	<div id="result" ></div>
</body>
</html>

3、返回json对象，但是在servlet中直接用把一个数组或集合转换成为json类型的数组对象

如果抛出 NestableRuntimeException异常，

说明没有导包，注意导入相关的jar包

commons-beanutils-1.8.3

commons-lang-2.6 (注：导入最新的 3.1 版本会继续报如下错误)

commons-collections-3.2.1

commons-logging-1.1.1

ezmorph-1.0.6

参考：http://blog.youkuaiyun.com/wugewuge/article/details/8074272

在servlet写法

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
		String username1 = request.getParameter("username");
		String username = URLDecoder.decode(username1,"UTF-8");
		StringBuilder message = new StringBuilder("");
		
		if(username!=null)
		{
			EmployeeDao employeeDao = new EmployeeDao();
			ArrayList<Employee> employees = employeeDao.select(username);
			 JSONArray jsonArray=JSONArray.fromObject(employees);
			 PrintWriter out = response.getWriter();
			 out.println(jsonArray.toString());//在jsp中的数据类型dataType："json"
				
		}
		
		
	}

在jsp中

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
function check(){
	var resultNode = $("#result");
	var username = $("#username").val();
	$.ajax({
		url:"ShowEmp_ajax_json2",
		type:"POST",
		data:{username:username},
		dataType:"json",//注意此时这里是json
		success:function(data){
			//转换成jquery对象
			var s = "<table border='1' width='100' height='100'>";
			//若servlet中要是用 
// 			JSONArray jsonArray=JSONArray.fromObject(employees);
// 			out.println(jsonArray.toString())
// 			这样的形式返回json对象，那么将相当于返回了一个json数组,
// 			类似这样[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]，
//			而不是这样{"emp":[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]}
// 			这样在jsp中就可以直接遍历data这个json数组，不需要再转换，也不需要用data.emp(本身在servlet转换过来的也没有emp),

// 			servlet中的contentType为application/json   jsp中dataType为json
			
			$.each(data,function(index,element){
// 				alert(element.empNo+element.ename);
				s+="<tr>";
				s += "<td>"+element.empNo+"</td>";
				s += "<td>"+element.ename+"</td>";
				s += "<td>"+element.job+"</td>";
				s += "<td>"+element.mgr+"</td>";
				s += "<td>"+element.date+"</td>";
				s += "<td>"+element.sal+"</td>";
				s += "<td>"+element.comm+"</td>";
				s += "<td>"+element.deptNo+"</td>";
				s+="</tr>";
			});
			s += "</table>";
			$("#result").html(s);
		}
	});
}
</script>
</head>
<body>
	输入用户名<input type="text" id="username" 	/>
	<input type="button" value="查找" onclick="check()" />
	<div id="result" ></div>
</body>
</html>