后端开发基础-Ajax学习-002——JSON对象

Java中如何使用JSON

JavaScript中如何使用JSON

相关概念：

##JSON应用
###JSON简介
JavaScript Object Notation 
JavaScript对象格式,属于js一种数据类型。
JSON类型格式如下:
var obj = {"key1":value1,"key2":value2};
obj.key1;//获取value1值
obj.key2;//获取value2值
###js如何将JSON字符串转成JSON对象
-方法一：eval("("+json字符串+")");
-方法二：JSON.parse(json字符串);
-方法三：使用第三方js库（略）
###Servlet服务器端如何将Java实体对象转成JSON字符串
-JSONObject：将单个对象转成JSON字符串
-JSONArray：将集合转成JSON字符串
Servlet:使用json-lib包

演示案例

演示工程目录结构

案例所需Jar包：

对应的 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.study</groupId>
  <artifactId>ajaxcase-day01</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <dependencies>
  	<dependency>
  		<groupId>junit</groupId>
  		<artifactId>junit</artifactId>
  		<version>4.12</version>
  	</dependency>
<!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib -->
<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.2.3</version>
     <classifier>jdk15</classifier>  
</dependency>

    
  </dependencies>
  
</project>

所需编写代码文件：City.java、TestJSON.java、demo2.html

City.java

package com.entity;

import java.io.Serializable;

public class City implements Serializable{
	private int id;
	private String name;
	//带参数构造器
	public City(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	
//	public int getNumber(){
//		return 1000;
//	}
	
	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;
	}
}

TestJSON.java 【Java演示JSON】

package com.test;

import java.util.ArrayList;
import java.util.List;

import org.junit.Test;

import com.entity.City;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class TestJSON {
	
	@Test//测试将多个City对象转成JSON字符串
	public void test2(){
		City c1 = new City(1,"北京");
		City c2 = new City(2,"上海");
		List<City> list = new ArrayList<City>();
		list.add(c1);
		list.add(c2);
		//利用JSONArray将list集合转成JSON字符串
		JSONArray jsonObj = JSONArray.fromObject(list);
		String jsonStr = jsonObj.toString();
		System.out.println(jsonStr);
	}
	
	
	//测试将单个City对象转成JSON字符串
	@Test
	public void test1(){
		City c = new City(1,"北京");
		//使用JSONObject将c对象转成JSON字符串
		JSONObject jsonObj =JSONObject.fromObject(c);
		String jsonStr = jsonObj.toString();
		System.out.println(jsonStr);
	}

}

demo2.html 【JavaScript演示JSON】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JSON应用</title>
		<script type="text/javascript">
			//标准的JSON对象类型
			var obj1 = {"name":"rose","age":20};
			alert(obj1.name);
			alert(obj1.age);
			
			var obj2 = {"name":"rose","age":20,
						"friends":["小曲","小樊","小邱","小关","andy"]
						};
			alert(obj2.friends[3]);//索引从0开始
			
			var obj3 = {"name":"rose",
						"address":{"street":"北京中关村大厦18号",
									"zipcode":"100086"},
						};
			alert(obj3.address.street);
			
			var obj4 = [{"id":1,"name":"北京"},
						{"id":2,"name":"上海"}
						];
			alert(obj4[1].name);
			
			var obj5 = '{"id":1,"name":"北京"}';//JSON格式字符串
			//方法1：使用eval()函数转成JSON类型
			var obj6 = eval("("+obj5+")");
			alert(obj6.name);
			
			//方法2：使用JSON.parse()函数转成JSON类型
			var obj7 = JSON.parse(obj5);
			alert(obj7.id);
			
			//方法3：使用第三方js库例如json.js或jQuery.js(以后再讲)
			
		</script>
	</head>
	<body>
	
	
	</body>
</html>

最终演示对应效果截图：

Java：

JavaScript：

后端开发基础-Ajax学习-002——JSON对象

演示案例

猜你喜欢