JSON实例应用

最新推荐文章于 2026-01-05 14:12:17 发布
转载 最新推荐文章于 2026-01-05 14:12:17 发布 · 785 阅读 · 0
文章标签：

#json #string #function #javascript #servlet #xmlhttprequest

本文介绍了一个使用JSON进行数据交换的示例，展示了如何通过JavaScript将对象转换为JSON格式，并发送到服务器，同时介绍了服务器端如何解析请求中的JSON数据。

JSON实例应用

文章分类:Web前端

JSON实际就是一种数据格式，传递数据，特别的地方在于：JSON的数据格式可以直接构成JavaScript中的一个对象，因些可以在JavaScript很易容访问到它的数据。（个人的见解，关于JSON的其它资料可以去google一下）

下面就应用一下JSON：

使用JSON需要一些文件：将js对象转化成JSON的数据格式的JS如：json.js

                                   将Java对象转化成JSON的数据格式的jar包：json-lib-2.3-jdk15.jar等可以在下面的附件中获得

我在我的工程中引入了这个文件（也可以不用这个文件，那么你需要自己在js或class中拼成JSON格式的数据）

Html代码 复制代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.        
  5.     <title>JSON学习</title>  
  6.     <meta http-equiv="pragma" content="no-cache">  
  7.     <meta http-equiv="cache-control" content="no-cache">  
  8.     <meta http-equiv="expires" content="0">       
  9.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  10.     <meta http-equiv="description" content="This is my page">  
  11.     <script type="text/javascript" src="js/json.js"></script>  
  12.   </head>  
  13.      
  14.   <script language="javascript">  
  15.     var xmlHttp;   
  16.     function createXMLHttpRequest() {     
  17.         if (window.ActiveXObject) {     
  18.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     
  19.         }      
  20.         else if (window.XMLHttpRequest) {     
  21.             xmlHttp = new XMLHttpRequest();     
  22.         }     
  23.     }   
  24.     function doJSON(){   
  25.         var car = getCarObject();   
  26.         //将JS对象转化成JSON格式的Text   
  27.         var carAsJSON = JSON.stringify(car);   
  28.         alert(carAsJSON);   
  29.         var url = "JsonTest1?timeStamp="+new Date().getTime();   
  30.         createXMLHttpRequest();   
  31.         xmlHttp.open("POST", url, true);   
  32.         xmlHttp.onreadystatechange = handleStateChange;   
  33.         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
  34.         xmlHttp.send(carAsJSON);   
  35.     }   
  36.     //Ajax的回调方法   
  37.     function handleStateChange(){   
  38.         if(xmlHttp.readyState == 4){   
  39.             if(xmlHttp.status == 200){   
  40.                 parseResults();   
  41.             }   
  42.         }   
  43.     }   
  44.     //具体的回调作动   
  45.     function parseResults(){   
  46.         var responseDiv = document.getElementById("serverResponse");   
  47.         if(responseDiv.hasChildNodes()){   
  48.             responseDiv.removeChild(responseDiv.childNodes[0]);   
  49.         }   
  50.         //xmlHttp.responseText是servlet中返回回来的JSON格式的数据，将它创建成一个js的node对象放到DIV中   
  51.         var responseText = document.createTextNode(xmlHttp.responseText);   
  52.         responseDiv.appendChild(responseText);   
  53.         //将json格式的Text转化成JSON对象：用eval('('+response+')')   
  54.         var resultJson = eval('('+xmlHttp.responseText+')');   
  55.         alert(resultJson);   
  56.         alert(resultJson.make);   
  57.         alert(resultJson.model);   
  58.         alert(resultJson.year);   
  59.         alert(resultJson.color);   
  60.     }   
  61.     //JS中的一个对象   
  62.     function Car(make,model,year,color){   
  63.         this.make = make;   
  64.         this.model = model;   
  65.         this.year = year;   
  66.         this.color = color;   
  67.     }   
  68.     //构成对象并返回   
  69.     function getCarObject(){   
  70.         return new Car("Dodge", "Coronet R/T", 1968, "yellow");   
  71.     }   
  72.   </script>  
  73.      
  74.   <body>  
  75.     <form action="#">     
  76.         <input type="button" value="Click here to send JSON data to the server" onclick="doJSON();"/>     
  77.     </form>  
  78.     <h2>Server Response:</h2>  
  79.     <div id="serverResponse">  
  80.            
  81.     </div>  
  82.   </body>  
  83. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>JSON学习</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/json.js"></script>
  </head>
  
  <script language="javascript">
  	var xmlHttp;
  	function createXMLHttpRequest() {  
    	if (window.ActiveXObject) {  
        	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
     	}   
     	else if (window.XMLHttpRequest) {  
        	xmlHttp = new XMLHttpRequest();  
     	}  
 	}
 	function doJSON(){
 		var car = getCarObject();
 		//将JS对象转化成JSON格式的Text
 		var carAsJSON = JSON.stringify(car);
 		alert(carAsJSON);
 		var url = "JsonTest1?timeStamp="+new Date().getTime();
 		createXMLHttpRequest();
 		xmlHttp.open("POST", url, true);
 		xmlHttp.onreadystatechange = handleStateChange;
 		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 		xmlHttp.send(carAsJSON);
 	}
 	//Ajax的回调方法
 	function handleStateChange(){
 		if(xmlHttp.readyState == 4){
 			if(xmlHttp.status == 200){
 				parseResults();
 			}
 		}
 	}
 	//具体的回调作动
 	function parseResults(){
 		var responseDiv = document.getElementById("serverResponse");
 		if(responseDiv.hasChildNodes()){
 			responseDiv.removeChild(responseDiv.childNodes[0]);
 		}
 		//xmlHttp.responseText是servlet中返回回来的JSON格式的数据，将它创建成一个js的node对象放到DIV中
 		var responseText = document.createTextNode(xmlHttp.responseText);
 		responseDiv.appendChild(responseText);
 		//将json格式的Text转化成JSON对象：用eval('('+response+')')
 		var resultJson = eval('('+xmlHttp.responseText+')');
 		alert(resultJson);
 		alert(resultJson.make);
 		alert(resultJson.model);
 		alert(resultJson.year);
 		alert(resultJson.color);
 	}
 	//JS中的一个对象
 	function Car(make,model,year,color){
 		this.make = make;
 		this.model = model;
 		this.year = year;
 		this.color = color;
 	}
 	//构成对象并返回
 	function getCarObject(){
		return new Car("Dodge", "Coronet R/T", 1968, "yellow");
 	}
  </script>
  
  <body>
  	<form action="#">  
    	<input type="button" value="Click here to send JSON data to the server" onclick="doJSON();"/>  
	</form>
	<h2>Server Response:</h2>
	<div id="serverResponse">
		
	</div>
  </body>
</html>

 在我的servlet中实现如下：

Java代码 复制代码  收藏代码
  1. public class JsonTest1 extends HttpServlet {   
  2.   
  3.     /**  
  4.      *   
  5.      */  
  6.     private static final long serialVersionUID = 306348969081510518L;   
  7.   
  8.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  9.             throws ServletException, IOException {   
  10.         this.doPost(request, response);   
  11.     }   
  12.   
  13.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  14.             throws ServletException, IOException {   
  15.         String json = readJSONStringFromRequestBody(request);   
  16.         System.out.println("json = " + json);   
  17.                 //将request中接收的字符串转化成json对java对象   
  18.         JSONObject jsonObject = JSONObject.fromObject(json);   
  19.         System.out.println("jsonObject = " + jsonObject.toString());   
  20.         System.out.println(jsonObject.getInt("year"));   
  21.         System.out.println(jsonObject.getString("make"));   
  22.         System.out.println(jsonObject.getString("model"));   
  23.         System.out.println(jsonObject.getString("color"));   
  24.         //设置返回的格式是text   
  25.         response.setContentType("text/plain");   
  26.         response.getWriter().print(jsonObject);   
  27.     }   
  28.   
  29.     private String readJSONStringFromRequestBody(HttpServletRequest request) {   
  30.         StringBuffer json = new StringBuffer();   
  31.         String line = null;   
  32.         try {   
  33.             BufferedReader bufferRead = request.getReader();   
  34.             while ((line = bufferRead.readLine()) != null) {   
  35.                 System.out.println("line = " + line);   
  36.                 json.append(line);   
  37.             }   
  38.         } catch (Exception e) {   
  39.             e.printStackTrace();   
  40.         }   
  41.         return json.toString();   
  42.     }   
  43. }  
public class JsonTest1 extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 306348969081510518L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String json = readJSONStringFromRequestBody(request);
		System.out.println("json = " + json);
                //将request中接收的字符串转化成json对java对象
		JSONObject jsonObject = JSONObject.fromObject(json);
		System.out.println("jsonObject = " + jsonObject.toString());
		System.out.println(jsonObject.getInt("year"));
		System.out.println(jsonObject.getString("make"));
		System.out.println(jsonObject.getString("model"));
		System.out.println(jsonObject.getString("color"));
		//设置返回的格式是text
		response.setContentType("text/plain");
		response.getWriter().print(jsonObject);
	}

	private String readJSONStringFromRequestBody(HttpServletRequest request) {
		StringBuffer json = new StringBuffer();
		String line = null;
		try {
			BufferedReader bufferRead = request.getReader();
			while ((line = bufferRead.readLine()) != null) {
				System.out.println("line = " + line);
				json.append(line);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return json.toString();
	}
}

 servlet的配置如下：

Xml代码 复制代码  收藏代码
  1. <servlet>  
  2.     <servlet-name>JsonTest1</servlet-name>  
  3.     <servlet-class>com.mengya.servlet.JsonTest1</servlet-class>  
  4.   </servlet>  
  5.   
  6.   <servlet-mapping>  
  7.     <servlet-name>JsonTest1</servlet-name>  
  8.     <url-pattern>/JsonTest1</url-pattern>  
  9.   </servlet-mapping>  

 相于java对象与json之类的转化的一些测试如下（跟上面的实例无关）：

Java代码 复制代码  收藏代码
  1. public class JsonBean1 {   
  2.     private String col;   
  3.   
  4.     private String row;   
  5.   
  6.     private String value;   
  7.   
  8.     public String getCol() {   
  9.         return col;   
  10.     }   
  11.   
  12.     public void setCol(String col) {   
  13.         this.col = col;   
  14.     }   
  15.   
  16.     public String getRow() {   
  17.         return row;   
  18.     }   
  19.   
  20.     public void setRow(String row) {   
  21.         this.row = row;   
  22.     }   
  23.   
  24.     public String getValue() {   
  25.         return value;   
  26.     }   
  27.   
  28.     public void setValue(String value) {   
  29.         this.value = value;   
  30.     }   
  31. }  
public class JsonBean1 {
	private String col;

	private String row;

	private String value;

	public String getCol() {
		return col;
	}

	public void setCol(String col) {
		this.col = col;
	}

	public String getRow() {
		return row;
	}

	public void setRow(String row) {
		this.row = row;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}
}
 
Java代码 复制代码  收藏代码
  1. /**  
  2.  *   
  3.  * @author 张明学  
  4.  *   
  5.  */  
  6. public class JsonBanTest {   
  7.   
  8.     /**  
  9.      * @param args  
  10.      */  
  11.     public static void main(String[] args) {   
  12.         boolean[] boolArray = new boolean[] { true, false, true };   
  13.         JSONArray jsonArray1 = JSONArray.fromObject(boolArray);   
  14.         System.out.println(jsonArray1);   
  15.   
  16.         List list = new ArrayList();   
  17.         list.add("first");   
  18.         list.add("second");   
  19.         JSONArray jsonArray2 = JSONArray.fromObject(list);   
  20.         System.out.println(jsonArray2);   
  21.   
  22.         JSONArray jsonArray3 = JSONArray.fromObject("['json','is','easy']");   
  23.         System.out.println(jsonArray3);   
  24.   
  25.         Map map = new HashedMap();   
  26.         map.put("name", "json");   
  27.         map.put("bool", Boolean.TRUE);   
  28.         map.put("int", new Integer(1));   
  29.         map.put("arr", new String[] { "a", "b" });   
  30.         map.put("func", "function(i){return this.arr[i]}");   
  31.         JSONObject json = JSONObject.fromObject(map);   
  32.         System.out.println(json);   
  33.            
  34.         JsonBean1 jb = new JsonBean1();   
  35.         jb.setCol("col1");   
  36.         jb.setRow("row1");   
  37.         jb.setValue("123");   
  38.         JSONObject ja = JSONObject.fromObject(jb);   
  39.         System.out.println(ja.toString());   
  40.            
  41.         List list2 = new ArrayList();   
  42.         JsonBean1 jb2 = new JsonBean1();   
  43.         jb2.setCol("col1");   
  44.         jb2.setRow("row1");   
  45.         jb2.setValue("123");   
  46.         list2.add(jb);   
  47.         list2.add(jb2);   
  48.         JSONArray jsonArray = JSONArray.fromObject(list2);   
  49.         System.out.println(jsonArray.toString());   
  50.            
  51.         String jsonStr = "{name=/"json/",bool:true,int:1,double:2.2,func:function(a){ return a; },array:[1,2]}";   
  52.         JSONObject jsonObject = JSONObject.fromObject(jsonStr);   
  53.         System.out.println(jsonObject);   
  54.         System.out.println(jsonObject.get("name"));   
  55.         System.out.println(jsonObject.get("bool"));   
  56.         System.out.println(jsonObject.get("int"));   
  57.         System.out.println(jsonObject.get("double"));   
  58.         System.out.println(jsonObject.get("func"));   
  59.         System.out.println(jsonObject.get("array"));   
  60.     }   
  61.        
  62. }  
精选资源
C#解析JSON实例.rar
06-03
在提供的"C#解析JSON实例.rar"压缩包中，可能包含了一系列示例代码，演示了如何在C#环境中使用这两种方法处理JSON数据。通过学习这些实例，开发者可以更好地理解如何在实际项目中灵活运用JSON解析和生成技术。建议...
.Net JQuery$.ajax Json实例应用【附带的源码】
07-26
.Net JQuery$.ajax Json实例应用 有人在评论里面骂，这个不能用，现在把源码传上来，估计是没有引用System.Web.Extensions和System.Web.Extensions.Design这两个Dll
JSON实例应用集合
先锋站长的博客
06-19 607
哦，先看一下json是是啥，有助于你更透彻的理解json和json开发中的实例应用。 json的全称 JavaScript Object Natation 是一种轻量级的数据交换格式，跟xml，html一样采用的最普通的文本格式，这样它的跨平台交互就轻而易举了！ 应用很简单,不用添加任何API,在Javascript中直接应用，看代码： 1.基本格式 // json对象 var json
java json实例化_java-通过JSON创建动态对象
weixin_42125770的博客
02-24 1164
我有一个Android应用程序,它接收JSON格式的字符串.JSON结构包含一组不同类型的JSON对象.我将为每种类型创建一个类,并希望借助JSON框架直接从JSON实例化对象.为了简化起见,让我们考虑以下示例：我们有两个Java类：public class A{public String a1 = "";public int a2 = 0;}public class B{public doubl...
json实例化、反实例化和反实例化列表
qq_42364200的博客
04-20 1126
1、类里的对象要相同 2、转换时要引用 3、JavaScriptSerializer：应对Json.NET使用序列化和反序列化。为启用AJAX的应用程序提供序列化和反序列化功能。 public class People //实体类 { public int ID { get; set; } public string Name { ...
json的操作应用实例
逆风飞舞2016的博客
07-24 1872
在自己做的商品收银页面中，反思这个页面的做法，觉得有必要做个笔记。      先来个系统截图：   简短的说明一下开单消费的业务流程：   1.页面加载成功后，出现左下角的datagrid,显示商品信息。   2.选择商品，可以多次多选，点击选中按钮，后台webservice返回的json数据加载显示在上面的datagrid里,（为了便于区分，这个取名datagrid1，左下角的那个取名d
Postgres - JSON 类型实例示例
Adunn的专栏
06-15 1259
Postgres - JSON类型实例示例 json会输出和输入完全相同的文本，而jsonb 则不会保留语义上没有意义的细节（例如空格）。 2. 创建数据表 create table( 字段类型：json ) 3. 插入json数据 4. 查询json数据 5. 按键值 返回JSON 对象字段 6. 按文本返回JSON对象字段 7. where中使用json操作符 8. 聚集函数min,max,average,sum 9. json_each、json_object_keys().........
HttpUrlConnection+JSON应用实例
xc8899的博客
03-15 2064
JSONJSON是一种轻量级的数据交换格式，有两种数据结构：单条JSON数据和多条JSON数组，其中JSON数组是以一对中括号【】表示，JSON对象是一对花括号{}表示，键-值相对，键必须包裹一对双引号，多个键值对中间用逗号分割。天气预报实例思路：运用HttpUrlConnection发送请求，从网络上获取数据（JSON），解析json数据更新UI界面。效果图展示代码展示一、在布局文件中创建出一个E
java json应用实例
mmc_may的专栏
08-07 809
http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.html http://m.weather.com.cn/data/101010100.html package weather; import java.io.BufferedReader
深入解析 `JSON.toJSONString()` 的用法与实例
热门推荐
沉淀所学，分享所思，让热爱与成长同行。商务记录AI实战经验，助力开发者快速成长。 热爱AI，希望做出有影响力的技术成果。 技术点亮生活，分享连接价值与机会。 专注AI落地实战，陪你走好技术每一步。
11-27 2万+
是fastjson库中最常用的方法之一，用于将 Java 对象序列化为 JSON 字符串格式。这一功能在 Web 开发、数据存储与交互中尤为重要。本篇博客将以通俗易懂的方式，详细讲解的核心用法及注意事项，并通过多个实例帮助小白用户快速上手。易于阅读和书写：格式简洁明了。广泛兼容性：支持多种编程语言。高效传输：数据体积小，适合网络通信。在 Java 开发中，fastjson是一款高性能的 JSON 解析库，方法是其核心功能之一，主要用于将 Java 对象转化为 JSON 格式。通过本文，我们学习了。
掌握.NET(C#)中的Ajax与JSON应用实例
weixin_33308579的博客
08-30 2682
本文还有配套的精品资源，点击获取 简介：在.NET框架中，C#作为主要编程语言，可以利用Ajax技术实现页面的异步数据更新，从而提升用户体验。JSON作为一种轻量级的数据交换格式，常用于服务器与客户端之间的数据传输。本文将深入探讨如何在.NET（C#）环境中，通过Ajax和JSON技术实现Web应用的前后端交互。介绍了Ajax的工作原理、JSON的特点，以及C#如何利用**...
JSON的android应用实例
weixin_34348174的博客
09-07 170
JSON的android应用实例   Json在线解析器    下面是直接通过JUnit来测试直接通过API来解析Json数据 1、普通键值对象       2、Json数组对象     3、Json数组对象    ...
json 实例详细说明教程
10-29
在本教程中，我们将深入探讨JSON的基本概念、使用方法以及一些实例，特别针对初次接触JSON的开发者。 首先，JSON数据结构主要由键值对组成，键是字符串，值可以是各种数据类型，包括字符串、数字、布尔值、数组、...
asp输出json实例，json.asp
05-27
总的来说，ASP生成JSON实例展示了服务器端如何处理和传输数据到客户端，这对于构建交互式的Web应用程序至关重要。`json.asp`和`daka.asp`的代码分析将提供更深入的理解，包括具体的函数实现、数据处理逻辑以及如何与...
JSON servlet实例 Ajax应用
07-13
在这个"JSON Servlet实例 Ajax应用"中，我们将探讨如何使用Servlet与客户端进行JSON数据交互，并结合Ajax实现异步通信。 首先，了解JSON的基本结构至关重要。JSON由键值对组成，键必须是字符串，且用双引号包围，值...
鸿蒙高性能动画库——lottie-turbo
liuhaikang的博客
01-04 807
Lottie-Turbo是OpenHarmony平台的动画渲染库，支持解析Adobe After Effects导出的JSON格式动画。主要特性包括：1）支持本地文件、网络资源和JSON字符串三种动画加载方式；2）提供全局和单个动画控制功能，包括播放、暂停、跳帧等操作；3）支持动画事件监听、颜色修改、资源替换等高级功能；4）具备离屏渲染能力，可将动画帧转为图像数据。该库采用声明式语法，兼容API12+设备，支持并行化渲染，适用于各类应用场景中的Lottie动画展示需求。
淘宝商品SKU规格信息获取指南及item_skuAPI开放接口详解
最新发布
z1205338073的博客
01-05 153
通过以上步骤，可高效集成淘宝SKU接口，实现商品数据的自动化管理。务必遵守《淘宝开放平台协议》，避免数据滥用或违规操作。：淘宝开放API文档页面。
Chrome 小工具: 启动本地应用 (Native messaging)
男神的专栏
01-05 460
这里我们定义了 Native Messaging 的名字, 在path中定义了我们要执行的本地应用程序, allowed_origins 中长串的字符是我们插件的id 能够在安装插件后从google chrome 插件里看到(安装插件 能够在chrome中插件开启开发人员模式并加载我们之前的插件文件包)里面有一个简单的button， 这个button会启动方法, 新建一个名叫”myCustomEvent”的事件, 同一时候附带有我们要传的信息, 并公布这个事件。最近遇到一个新的问题。
原创分享：Markdown 表格导出 Excel/Json - 方便数据处理分析
wxaiway的博客
01-01 366
Markdown转Word工具新增表格导出功能，支持将Markdown中的表格单独导出为Excel或JSON格式。Excel导出支持多表格处理（每个表格独立工作表）、自动列宽调整和中文字符处理；JSON导出提供结构化数据格式，包含表格索引、名称和内容。该功能适用于数据分析、API交换等场景，支持移动端使用。访问https://wxaiway.com/md2wd/即可体验，使用中遇到问题可留言反馈。
深入解析JSON实例及源码应用
- 该文件标题为"json小实例demo"，描述中多次提及"jsondemo json实例 json源码"，表明文件内容是一个展示JSON使用的小示例。 - 这个Demo可能是为了演示如何创建、解析和操作JSON数据。 - 这个实例可能包含了创建...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值