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

左手的ㄟ右手 2022-09-18 09:57 348阅读 0赞

对于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="查找" οnclick="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="查找" οnclick="check()" />
    	<div id="result" ></div>
    </body>
    </html>

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

如果[抛出 NestableRuntimeException异常，][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.csdn.net/wugewuge/article/details/8074272

在servlet写法

在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="查找" οnclick="check()" />
    	<div id="result" ></div>
    </body>
    </html>

[NestableRuntimeException]: http://blog.csdn.net/wugewuge/article/details/8074272
[commons-beanutils-1.8.3]: http://mirror.bjtu.edu.cn/apache//commons/beanutils/binaries/commons-beanutils-1.8.3-bin.zip
[commons-lang-2.6]: http://labs.mop.com/apache-mirror//commons/lang/binaries/commons-lang-2.6-bin.zip
[commons-collections-3.2.1]: http://apache.dataguru.cn//commons/collections/binaries/commons-collections-3.2.1-bin.zip
[commons-logging-1.1.1]: http://apache.etoak.com//commons/logging/binaries/commons-logging-1.1.1-bin.zip
[ezmorph-1.0.6]: http://sourceforge.net/projects/ezmorph/files/latest/download?source=files