JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析（代码实例）

其他 2018-08-01 04:45:32 阅读次数: 0


JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析（代码实例）

原创 2016年02月05日 21:12:35
阅读全文
版权声明：本文为博主原创文章，未经博主允许不得转载。

JSON是一种轻量的统一的数据交换格式，特别适合在JavaScript中使用，JSON数据可以被轻松的转换为JS对象，在JS使用越来越广泛的今天，要成为一名优秀的web开发工程师，学好它势在必行，它也确实能为你提供实在的便利！

下面我们以一个jsp + servlet的demo来简单了解JSON用法。

源码下载地址

一、准备工作

项目结构图：


jar包下载：

免费下载链接

二、Person类（Model）

没有什么特别的，私有属性与它们的get()、set()方法。

[java] view plain copy print ?
  1. public class Person {  
  2.     private int id;  
  3.     private String name;  
  4.     private String pwd;  
  5.   
  6.     public int getId() {  
  7.         return id;  
  8.     }  
  9.   
  10.     public void setId(int id) {  
  11.         this.id = id;  
  12.     }  
  13.   
  14.     public String getName() {  
  15.         return name;  
  16.     }  
  17.   
  18.     public void setName(String name) {  
  19.         this.name = name;  
  20.     }  
  21.   
  22.     public String getPwd() {  
  23.         return pwd;  
  24.     }  
  25.   
  26.     public void setPwd(String pwd) {  
  27.         this.pwd = pwd;  
  28.     }  
  29. }  
public class Person {
	private int id;
	private String name;
	private String pwd;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
}
三、servlet类（Controller）
继承httpServlet，重写doGet()与doPost()方法，完成具体的业务逻辑的处理，将数据库中的数据对象化，然后包装为JSON；

当然，这个Servlet必须在web.xml中注册与配置映射。

[java] view plain copy print ?
  1. public class Json extends HttpServlet {  
  2.   
  3.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  4.             throws ServletException, IOException {  
  5.   
  6.         doPost(request, response);  
  7.     }  
  8.   
  9.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  10.             throws ServletException, IOException {  
  11.           
  12.         response.setContentType("text/xml;character=utf-8");  
  13.         response.setHeader("Cache-Control", "no-cache");  
  14.         try {  
  15.             //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出  
  16.             Person p = new Person();  
  17.             p.setName("first");  
  18.             p.setId(1);  
  19.             p.setPwd("123456");  
  20.             Person p1 = new Person();  
  21.             p1.setName("second");  
  22.             p1.setId(2);  
  23.             p1.setPwd("666888");  
  24.             //将Person对象装入集合  
  25.             List<Person> list = new ArrayList<Person>();  
  26.             list.add(p);  
  27.             list.add(p1);  
  28.             try {  
  29.                 //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入  
  30.                 JSONArray json = JSONArray.fromObject(list);  
  31.                 //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象  
  32.                 JSONObject jb = new JSONObject();  
  33.                 //将jsonArray对象装入  
  34.                 jb.put("person", json);  
  35.                 //输出Json数据，它就是一种特殊格式的字符串  
  36.                 response.getWriter().write(jb.toString());  
  37.                   
  38.                 /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array) 
  39.                  *JSONArray jsonArray = new JSONArray(); 
  40.                  *JSONObject jb = new JSONObject(); 
  41.                  *jb.put("person", json); 
  42.                  *jsonArray.add(jb); 
  43.                  *response.getWriter().write(jsonArray.toString()); 
  44.                  */  
  45.                   
  46.             } catch (IOException e) {  
  47.                 e.printStackTrace();  
  48.             }  
  49.         } catch (Exception e) {  
  50.             e.printStackTrace();  
  51.         }  
  52.     }  
  53. }  
public class Json 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 {
		
		response.setContentType("text/xml;character=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		try {
			//创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出
			Person p = new Person();
			p.setName("first");
			p.setId(1);
			p.setPwd("123456");
			Person p1 = new Person();
			p1.setName("second");
			p1.setId(2);
			p1.setPwd("666888");
			//将Person对象装入集合
			List<Person> list = new ArrayList<Person>();
			list.add(p);
			list.add(p1);
			try {
				//创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入
				JSONArray json = JSONArray.fromObject(list);
				//JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象
				JSONObject jb = new JSONObject();
				//将jsonArray对象装入
				jb.put("person", json);
				//输出Json数据，它就是一种特殊格式的字符串
				response.getWriter().write(jb.toString());
				
				/*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array)
				 *JSONArray jsonArray = new JSONArray();
				 *JSONObject jb = new JSONObject();
				 *jb.put("person", json);
				 *jsonArray.add(jb);
				 *response.getWriter().write(jsonArray.toString());
				 */
				
			} catch (IOException e) {
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}
[html] view plain copy print ?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <display-name></display-name>   
  8.     
  9.   <servlet>  
  10.     <servlet-name>Json</servlet-name>  
  11.     <servlet-class>com.jsonTest.servlet.Json</servlet-class>  
  12.   </servlet>  
  13.     
  14.   <servlet-mapping>  
  15.     <servlet-name>Json</servlet-name>  
  16.     <url-pattern>/json</url-pattern>  
  17.   </servlet-mapping>  
  18.   <welcome-file-list>  
  19.     <welcome-file>index.jsp</welcome-file>  
  20.   </welcome-file-list>  
  21. </web-app>  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>	
  
  <servlet>
  	<servlet-name>Json</servlet-name>
  	<servlet-class>com.jsonTest.servlet.Json</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>Json</servlet-name>
  	<url-pattern>/json</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
四、JSP(View)

接收后台通过服务器发送的JSON数据，然后用JS的eval方法解析JSON将数据转化为JS对象。

关于AJAX与服务器端通信，请参看另一篇博客AJAX初识与XMLHttpRequest介绍。

关于eval解析JSON，请参看另一篇博客eval解析JSON注意点。

[html] view plain copy print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11. <base href="<%=basePath%>">  
  12.   
  13. <title>My JSP 'index.jsp' starting page</title>  
  14. <meta http-equiv="pragma" content="no-cache">  
  15. <meta http-equiv="cache-control" content="no-cache">  
  16. <meta http-equiv="expires" content="0">  
  17. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18. <meta http-equiv="description" content="This is my page">  
  19. <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. </head>  
  23.   
  24. <body>  
  25.     <input type="button" onclick="validate()" value="请求并解析JSON">  
  26.     <div id="div"></div>  
  27.     <table border="1" style="width:300px;height:200px;" id="table">  
  28.         <tr id="tr" border="1">  
  29.             <td>1</td>  
  30.             <td>1</td>  
  31.             <td>1</td>  
  32.         </tr>  
  33.   
  34.         <tr border="1">  
  35.             <td>1</td>  
  36.             <td>1</td>  
  37.             <td>1</td>  
  38.         </tr>  
  39.     </table>  
  40.     <script type="text/javascript">  
  41.     
  42.      function validate(){  
  43.      var div=document.getElementById("div");  
  44.      var xmlhttp;  
  45.      var table=document.getElementById('table');  
  46.   
  47.         if (window.XMLHttpRequest) {  
  48.             xmlhttp = new XMLHttpRequest();  
  49.         } else {  
  50.             xmlhttp = new ActiveObject("Microsoft.XMLHTTP");  
  51.         }  
  52.         xmlhttp.onreadystatechange = function() {  
  53.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
  54.                 var x = xmlhttp.responseText  
  55.                 div.innerHTML = x;  
  56.                 var sd = eval("(" + x + ")");  
  57.   
  58.                 var arr = new Array();  
  59.                 var i = 0;  
  60.                 for ( var a in sd.person) {//获取有几个person  
  61.                     var count = 0;//计算person属性值的个数  
  62.                     i++;  
  63.                     for ( var item in sd.person[a]) {  
  64.                         count++;  
  65.                         var p = sd.person[a][item];//得到属性值的内容  
  66.                         table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格  
  67.                     }  
  68.                 }  
  69.             }  
  70.         }  
  71.         var url = "json";  
  72.         xmlhttp.open("POST", url, true);  
  73.         xmlhttp.send();  
  74.   
  75.     }  
  76. </script>  
  77. </body>  
  78. </body>  
  79. </html>  
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</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">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	<input type="button" onclick="validate()" value="请求并解析JSON">
	<div id="div"></div>
	<table border="1" style="width:300px;height:200px;" id="table">
		<tr id="tr" border="1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>

		<tr border="1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>
	<script type="text/javascript">
  
     function validate(){
     var div=document.getElementById("div");
     var xmlhttp;
     var table=document.getElementById('table');

		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var x = xmlhttp.responseText
				div.innerHTML = x;
				var sd = eval("(" + x + ")");

				var arr = new Array();
				var i = 0;
				for ( var a in sd.person) {//获取有几个person
					var count = 0;//计算person属性值的个数
					i++;
					for ( var item in sd.person[a]) {
						count++;
						var p = sd.person[a][item];//得到属性值的内容
						table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格
					}
				}
			}
		}
		var url = "json";
		xmlhttp.open("POST", url, true);
		xmlhttp.send();

	}
</script>
</body>
</body>
</html>
五、执行效果

启动Tomcat服务器，通过浏览器URL访问项目，http://localhost:8080/jsonTest/，就可以看到如下效果



JSON是一种轻量的统一的数据交换格式，特别适合在JavaScript中使用，JSON数据可以被轻松的转换为JS对象，在JS使用越来越广泛的今天，要成为一名优秀的web开发工程师，学好它势在必行，它也确实能为你提供实在的便利！

下面我们以一个jsp + servlet的demo来简单了解JSON用法。

源码下载地址

一、准备工作

项目结构图：


jar包下载：

免费下载链接

二、Person类（Model）

没有什么特别的，私有属性与它们的get()、set()方法。

[java] view plain copy print ?
  1. public class Person {  
  2.     private int id;  
  3.     private String name;  
  4.     private String pwd;  
  5.   
  6.     public int getId() {  
  7.         return id;  
  8.     }  
  9.   
  10.     public void setId(int id) {  
  11.         this.id = id;  
  12.     }  
  13.   
  14.     public String getName() {  
  15.         return name;  
  16.     }  
  17.   
  18.     public void setName(String name) {  
  19.         this.name = name;  
  20.     }  
  21.   
  22.     public String getPwd() {  
  23.         return pwd;  
  24.     }  
  25.   
  26.     public void setPwd(String pwd) {  
  27.         this.pwd = pwd;  
  28.     }  
  29. }  
public class Person {
	private int id;
	private String name;
	private String pwd;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
}
三、servlet类（Controller）
继承httpServlet，重写doGet()与doPost()方法，完成具体的业务逻辑的处理，将数据库中的数据对象化，然后包装为JSON；

当然，这个Servlet必须在web.xml中注册与配置映射。

[java] view plain copy print ?
  1. public class Json extends HttpServlet {  
  2.   
  3.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  4.             throws ServletException, IOException {  
  5.   
  6.         doPost(request, response);  
  7.     }  
  8.   
  9.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  10.             throws ServletException, IOException {  
  11.           
  12.         response.setContentType("text/xml;character=utf-8");  
  13.         response.setHeader("Cache-Control", "no-cache");  
  14.         try {  
  15.             //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出  
  16.             Person p = new Person();  
  17.             p.setName("first");  
  18.             p.setId(1);  
  19.             p.setPwd("123456");  
  20.             Person p1 = new Person();  
  21.             p1.setName("second");  
  22.             p1.setId(2);  
  23.             p1.setPwd("666888");  
  24.             //将Person对象装入集合  
  25.             List<Person> list = new ArrayList<Person>();  
  26.             list.add(p);  
  27.             list.add(p1);  
  28.             try {  
  29.                 //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入  
  30.                 JSONArray json = JSONArray.fromObject(list);  
  31.                 //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象  
  32.                 JSONObject jb = new JSONObject();  
  33.                 //将jsonArray对象装入  
  34.                 jb.put("person", json);  
  35.                 //输出Json数据，它就是一种特殊格式的字符串  
  36.                 response.getWriter().write(jb.toString());  
  37.                   
  38.                 /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array) 
  39.                  *JSONArray jsonArray = new JSONArray(); 
  40.                  *JSONObject jb = new JSONObject(); 
  41.                  *jb.put("person", json); 
  42.                  *jsonArray.add(jb); 
  43.                  *response.getWriter().write(jsonArray.toString()); 
  44.                  */  
  45.                   
  46.             } catch (IOException e) {  
  47.                 e.printStackTrace();  
  48.             }  
  49.         } catch (Exception e) {  
  50.             e.printStackTrace();  
  51.         }  
  52.     }  
  53. }  
public class Json 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 {
		
		response.setContentType("text/xml;character=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		try {
			//创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出
			Person p = new Person();
			p.setName("first");
			p.setId(1);
			p.setPwd("123456");
			Person p1 = new Person();
			p1.setName("second");
			p1.setId(2);
			p1.setPwd("666888");
			//将Person对象装入集合
			List<Person> list = new ArrayList<Person>();
			list.add(p);
			list.add(p1);
			try {
				//创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入
				JSONArray json = JSONArray.fromObject(list);
				//JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象
				JSONObject jb = new JSONObject();
				//将jsonArray对象装入
				jb.put("person", json);
				//输出Json数据，它就是一种特殊格式的字符串
				response.getWriter().write(jb.toString());
				
				/*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array)
				 *JSONArray jsonArray = new JSONArray();
				 *JSONObject jb = new JSONObject();
				 *jb.put("person", json);
				 *jsonArray.add(jb);
				 *response.getWriter().write(jsonArray.toString());
				 */
				
			} catch (IOException e) {
				e.printStackTrace();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}
[html] view plain copy print ?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <display-name></display-name>   
  8.     
  9.   <servlet>  
  10.     <servlet-name>Json</servlet-name>  
  11.     <servlet-class>com.jsonTest.servlet.Json</servlet-class>  
  12.   </servlet>  
  13.     
  14.   <servlet-mapping>  
  15.     <servlet-name>Json</servlet-name>  
  16.     <url-pattern>/json</url-pattern>  
  17.   </servlet-mapping>  
  18.   <welcome-file-list>  
  19.     <welcome-file>index.jsp</welcome-file>  
  20.   </welcome-file-list>  
  21. </web-app>  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>	
  
  <servlet>
  	<servlet-name>Json</servlet-name>
  	<servlet-class>com.jsonTest.servlet.Json</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>Json</servlet-name>
  	<url-pattern>/json</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
四、JSP(View)

接收后台通过服务器发送的JSON数据，然后用JS的eval方法解析JSON将数据转化为JS对象。

关于AJAX与服务器端通信，请参看另一篇博客AJAX初识与XMLHttpRequest介绍。

关于eval解析JSON，请参看另一篇博客eval解析JSON注意点。

[html] view plain copy print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11. <base href="<%=basePath%>">  
  12.   
  13. <title>My JSP 'index.jsp' starting page</title>  
  14. <meta http-equiv="pragma" content="no-cache">  
  15. <meta http-equiv="cache-control" content="no-cache">  
  16. <meta http-equiv="expires" content="0">  
  17. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18. <meta http-equiv="description" content="This is my page">  
  19. <!-- 
  20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  21.     -->  
  22. </head>  
  23.   
  24. <body>  
  25.     <input type="button" onclick="validate()" value="请求并解析JSON">  
  26.     <div id="div"></div>  
  27.     <table border="1" style="width:300px;height:200px;" id="table">  
  28.         <tr id="tr" border="1">  
  29.             <td>1</td>  
  30.             <td>1</td>  
  31.             <td>1</td>  
  32.         </tr>  
  33.   
  34.         <tr border="1">  
  35.             <td>1</td>  
  36.             <td>1</td>  
  37.             <td>1</td>  
  38.         </tr>  
  39.     </table>  
  40.     <script type="text/javascript">  
  41.     
  42.      function validate(){  
  43.      var div=document.getElementById("div");  
  44.      var xmlhttp;  
  45.      var table=document.getElementById('table');  
  46.   
  47.         if (window.XMLHttpRequest) {  
  48.             xmlhttp = new XMLHttpRequest();  
  49.         } else {  
  50.             xmlhttp = new ActiveObject("Microsoft.XMLHTTP");  
  51.         }  
  52.         xmlhttp.onreadystatechange = function() {  
  53.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
  54.                 var x = xmlhttp.responseText  
  55.                 div.innerHTML = x;  
  56.                 var sd = eval("(" + x + ")");  
  57.   
  58.                 var arr = new Array();  
  59.                 var i = 0;  
  60.                 for ( var a in sd.person) {//获取有几个person  
  61.                     var count = 0;//计算person属性值的个数  
  62.                     i++;  
  63.                     for ( var item in sd.person[a]) {  
  64.                         count++;  
  65.                         var p = sd.person[a][item];//得到属性值的内容  
  66.                         table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格  
  67.                     }  
  68.                 }  
  69.             }  
  70.         }  
  71.         var url = "json";  
  72.         xmlhttp.open("POST", url, true);  
  73.         xmlhttp.send();  
  74.   
  75.     }  
  76. </script>  
  77. </body>  
  78. </body>  
  79. </html>  
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</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">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	<input type="button" onclick="validate()" value="请求并解析JSON">
	<div id="div"></div>
	<table border="1" style="width:300px;height:200px;" id="table">
		<tr id="tr" border="1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>

		<tr border="1">
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>
	<script type="text/javascript">
  
     function validate(){
     var div=document.getElementById("div");
     var xmlhttp;
     var table=document.getElementById('table');

		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var x = xmlhttp.responseText
				div.innerHTML = x;
				var sd = eval("(" + x + ")");

				var arr = new Array();
				var i = 0;
				for ( var a in sd.person) {//获取有几个person
					var count = 0;//计算person属性值的个数
					i++;
					for ( var item in sd.person[a]) {
						count++;
						var p = sd.person[a][item];//得到属性值的内容
						table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格
					}
				}
			}
		}
		var url = "json";
		xmlhttp.open("POST", url, true);
		xmlhttp.send();

	}
</script>
</body>
</body>
</html>
五、执行效果

启动Tomcat服务器，通过浏览器URL访问项目，http://localhost:8080/jsonTest/，就可以看到如下效果



猜你喜欢

转载自blog.csdn.net/yegshun/article/details/79126164
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022