後端開發基礎-Ajax學習-002——JSON物件
阿新 • • 發佈：2018-12-14
- Java中如何使用JSON
- JavaScript中如何使用JSON
演示案例
演示工程目錄結構
案例所需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：
