JSON&Ajax01
-
JSON 在線檔案
-
AJAX 在線檔案
1.JSON介紹
-
JSON指的是JavaScript物件表示法（ JavaScript Object Notation），JSON的本質仍然是JavaScript物件
-
JSON是輕量級的文本資料互動格式，也是前后端進行資料通訊的一種格式：
-
JSON獨立于語言，即java，PHP，asp.net，go等都可以使用json
-
JSON具有自我描述性，更易理解，一句話，JSON很好用，
2.JSON快速入門
2.1JSON的定義格式
var 變數名 = {
"k1":value,//Number型別
"k2":"str",//字串型別
"k3":[],//陣列型別
"k4":{},//json物件型別
"k5":[{},{}]//json陣列
};
例子：
var myJson = {
"key1":1234,//Number型別
"key2":"Hello",//字串型別
"key3":[1,"he llo",2.3],//陣列型別
"key4":{"age":12,"name":"jack"},//json物件型別
"key5":[ //json陣列
{"k1":10,"k2":"milan"},
{"k3":30,"k4":"smith"}
]};
2.2格式規則
k-v形式，然后v中又可以嵌套k-v，并且每對k-v之間用逗號隔開
- 映射（元素/屬性）用冒號
:表示，"名稱":值，注意名稱是字串，因此要用雙引號括起來 - 并列的資料之間用逗號
,分隔，如"名稱1":值,"名稱2":值 - 映射的集合（物件）用大括號
{}表示，如{"名稱1":值,"名稱2":值} - 并列資料的集合（陣列）用方括號
[]表示，如[{"名稱1":值,"名稱2":值},{"名稱1":值,"名稱2":值}] - 元素值型別：string，number，object，array，true，false，null
2.3入門案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json快速入門案例</title>
<script type="text/javascript">
window.onload = function () {
/**
* myJson 就是一個json物件
*/
var myJson = {
"key1": 1234,//Number型別
"key2": "Hello",//字串型別
"key3": [1, "hello", 2.3],//陣列型別
"key4": {"age": 12, "name": "jack"},//json物件
"key5": [ //json陣列
{"k1": 10, "k2": "milan"},
{"k3": 30, "k4": "smith"}
]
};
// 演示如何獲取到json物件的各個屬性/key
// 1.取出key1
console.log("key1= ", myJson.key1);
// 2.取出key3
//這里使用逗號來避免myJson.key3變成字串
console.log("key3= ", myJson.key3);
// 可以對key3取出的值（array）遍歷
for (var i = 0; i < myJson.key3.length; i++) {
//使用下標取出陣列的值
console.log("第%i個元素的值= ", i, myJson.key3[i]);
}
//3.取出key4
console.log("key4= ", myJson.key4)
console.log("key4.name= ", myJson.key4.name)
//4.取出key5
console.log("key5= ", myJson.key5)
console.log("取出key5的第二個陣列的key4值= ", myJson.key5[1].k4)
}
</script>
</head>
<body>
<h1>json快速入門案例</h1>
</body>
</html>
打開瀏覽器控制臺，輸出如下：
3.JSON物件和字串物件轉換
-
JSON.stringify(json)：將一個json物件轉換成為json字串 -
JSON.parse(jsonString)：將一個json字串轉換成為json物件轉換前提是傳入的字串的格式必須滿足json格式
3.1應用實體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON物件和字串物件轉換</title>
<script type="text/javascript">
window.onload = function () {
//解讀JSON
//1.JSON是一個js的內置物件(build-in),可以直接使用，不需要創建
console.log(JSON);
//演示如何將一個JSON物件轉成-->String
var jsonPerson = {
"name": "jack",
"age": 23
}
console.log("jsonPerson= ", jsonPerson, " jsonPerson型別= ", typeof jsonPerson);
var strPerson = JSON.stringify(jsonPerson);
console.log("strPerson= ", strPerson, " strPerson型別= ", typeof strPerson);
//演示如何將一個String物件轉成-->JSON
//注意轉成json物件的字串格式必須滿足json格式
var strDog = "{\"name\":\"小黃狗\",\"age\":2}";
var jsonDog = JSON.parse(strDog);
console.log("jsonDog= ", jsonDog)
}
</script>
</head>
<body>
<h1>JSON物件和字串物件轉換</h1>
</body>
</html>
打開瀏覽器控制臺，輸出如下：
3.2注意事項和細節
-
JSON.stringify(json物件)會回傳對應的string，并不會影響原來json物件
-
JSON.parse(jsonString)方法會回傳對應的json物件，并不會影響原來的string
-
在定義Json物件時，可以使用單引號
''或者雙引號""表示字串，甚至前面的key可以不用任何引號比如
var json_person={"name":"jack","age":100};也可以寫成
var json_person={'name':'jack','age':100};或者是
var json_person={name:"jack",age:100}; -
但是在把原生字串轉成json物件時，必須使用雙引號
""，否則會報錯 -
JSON.springfiy(json物件)方法回傳的字串都是雙引號
""表示的字串，所以在語法格式正確的情況下，是可以重新轉成json物件的，
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON和字串轉換的注意事項和細節</title>
<script type="text/javascript">
window.onload = function () {
var jsonPerson = {
"name": "jack",
"age": 22
}
//1.JSON.stringify(json物件)會回傳對應的string，并不會影響原來json物件
var strPerson = JSON.stringify(jsonPerson);
console.log("jsonPerson=", jsonPerson);
//2.JSON.parse(jsonString)方法會回傳對應的json物件，并不會影響原來的string
var strDog = "{\"name\":\"小黃狗\",\"age\":2}";
var jsonDog = JSON.parse(strDog);
console.log("strDog=", strDog, "型別= ", typeof strDog)
//3.在定義Json物件時，可以使用單引號或者雙引號表示字串
// 甚至前面的key可以不用任何引號
var jsonCat = {
name: '貓貓',
age: 2
}
console.log("jsonCat=", jsonCat);
//4.但是在把原生字串轉成json物件時，必須使用雙引號""，否則會報錯
//例如：
var str_dog2 = "{name:'小黃狗',age:2}";
// JSON.parse(str_dog2);--報錯
//JSON.springfiy(json物件)回傳的字串都是雙引號`""`表示的字串，
// 所以在語法格式正確的情況下，是可以重新轉成json物件的
var strCat = JSON.stringify(jsonCat);
var parse = JSON.parse(strCat);
console.log("parse=", parse)
}
</script>
</head>
<body>
<h1>JSON和字串轉換的注意事項和細節</h1>
</body>
</html>
打開瀏覽器控制臺，輸出如下：
4.JSON在Java中使用
前面講述的是前端頁面中json物件和字串之間的轉化，在實際開發中，前端將json格式的字串發送給后端，后端拿到后，可以將其轉成java物件，進行其他操作，并可以在業務操作后，重新向前端發送json格式的字串，
這意味著在Java后端中，同樣有物件和字串物件轉換的需求，
4.1說明
- Java中使用json，需要引入第三方的包 gson.jar
- Gson是Google提供的用來在Java物件和 JSON資料之間進行映射的Java類別庫
- 可以對JSON字串和Java物件相互轉換
4.2JSON在Java中的應用場景
- Javabean物件和json字串的相互轉換
- List物件和json字串的相互轉換
- Map物件和json字串的相互轉換
4.3Java物件和JSON字串互轉
在專案中的lib目錄下將gson.jar檔案復制過來，點擊add as library作為庫
Javabean：Book類
package com.li.json;
//這是一個Javabean
public class Book {
private Integer id;
private String name;
public Book(Integer id, String name) {
this.id = id;
this.name = name;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Book{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
JavaJson：
package com.li.json;
import com.google.gson.Gson;
public class JavaJson {
public static void main(String[] args) {
//創建一個gson物件，作為一個工具物件使用
Gson gson = new Gson();
//演示Javabean和json格式字串的轉換
Book book = new Book(10001, "三國演義");
//1.演示把一個Javabean轉成json格式的字串
String strBook = gson.toJson(book);
System.out.println("strBook=" + strBook);
//2.json字串-->JavaBean
//(1)strBook 就是json字串
//(2)Book.class 指定將json字串轉成Book型別的物件
//(3)底層使用反射機制來完成
Book book2 = gson.fromJson(strBook, Book.class);
System.out.println("book2=" + book2);
}
}
4.4List物件和JSON字串互轉
Book類見4.3
JavaJson：
package com.li.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.List;
public class JavaJson {
public static void main(String[] args) {
//創建一個gson物件，做為一個工具物件使用
Gson gson = new Gson();
//3.演示把List物件-->json字串
ArrayList<Book> bookList = new ArrayList<>();
bookList.add(new Book(100, "天龍八部"));
bookList.add(new Book(200, "紅樓夢"));
//因為把一個物件或者集合轉成字串，相對比較簡單
//底層只需要遍歷，按照json格式拼接回傳即可
String strBookList = gson.toJson(bookList);
System.out.println("strBookList= " + strBookList);
//4.把json字串轉成-->list物件
//(1)如果要把json字串，轉成 集合 這種比較復雜的型別，需要使用Gson提供的一個類：TypeToken
//(2)這個TypeToken類在com.google.gson.reflect下面，在反射物件的時候使用
//(3)TypeToken 是一個自定義泛型類，通過TypeToken來指定我們需要轉換成的型別
/*
* public class TypeToken<T> {
* final Class<? super T> rawType;
* final Type type;
* final int hashCode;
*
* protected TypeToken() {
* this.type = getSuperclassTypeParameter(this.getClass());
* this.rawType = Types.getRawType(this.type);
* this.hashCode = this.type.hashCode();
* }
* ...
* ...
* }
*/
/*
TypeToken
(1)下面的陳述句new TypeToken<List<Book>>(){}.getType()，
回傳型別的完整的路徑 java.util.List<com.li.json.Book>
(2)gson的設計者需要得到型別的完整路徑，然后進行底層的反射
(3)所以gson設計者提供了一個TypeToken類來搞定
*/
Type type = new TypeToken<List<Book>>(){}.getType();
System.out.println(type.getClass());//class com.google.gson.internal.$Gson$Types$ParameterizedTypeImp
// System.out.println("type= " + type);//java.util.List<com.li.json.Book>
List<Book> bookList2 = gson.fromJson(strBookList, type);
System.out.println("bookList2="+bookList2);
}
}
4.4.1TypeToken
TypeToken類的作用是：得到型別的完整路徑，然后進行底層的反射
Type type = new TypeToken<List<Book>>(){}.getType();
一個問題，TypeToken為什么要加{}?
-
如果我們把下面陳述句中的 {} 去掉，會提示
'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken' -
因為TypeToken的無參構造器是protected的，而陳述句
TypeToken<List<Book>>()就是呼叫其無參構造器，我們知道，如果一個方法是protected，并且和當前類不在同一個包，那么就沒有該方法的訪問權限，因此報錯，
-
那為什么加上{} ,就可以訪問了呢？這里涉及到匿名內部類的知識，
-
當我們這樣使用的時候：
new TypeToken<List<Book>>(){}，其實這個型別就不是TypeToken，而是一個匿名內部類（可以理解為TypeToken的一個子類） -
而且這個匿名內部類有自己的無參構造器(隱式)，根據java基礎，當執行子類的無參構造器時，默認呼叫super(); 到父類的無參構造器執行
我們在Type type = new TypeToken<List<Book>>() {}.getType();處打上斷點，并在TypeToken類中的無參構造器旁也打上斷點，點擊debug，點擊Resume Program按鈕
可以看到游標跳轉到TypeToken類中的無參構造器：
再點擊step over，可以看到，type屬性拿到了型別的完整路徑，這樣才能去進行底層的反射
4.4.2二說TypeToken
我們用兩個類來模擬一下上述4.4.1的程序
在src目錄下創建兩個包：t1和t2，在t1中創建一個A類，在t2中創建一個Test類
A類：
package com.li.t1;
public class A<T> {
protected A() {
System.out.println("A 的protected A() 被呼叫...");
}
}
這時如果在Test類中new一個A類物件，那么將會報錯，原因就是被 protected 修飾的成員對于本包和其子類可見，而A和Test類既不在同一個包，也不是繼承關系，這和4.4.1報錯的原因完全一致，
實際上，protected的可見性在于兩點：1.基類的 protected 成員是包內可見的，并且對子類可見；2.若子類與基類不在同一包中，那么在子類中，子類實體可以訪問其從基類繼承而來的protected方法，而不能訪問基類實體的protected方法，
Java protected 關鍵字詳解 | 菜鳥教程 (runoob.com)
package com.li.t2;
import com.li.t1.A;
public class Test {
public static void main(String[] args) {
A a = new A<String>() {};
//1.因為A類和Test類不在同一個包，也不是繼承關系，不能訪問A的protected成員，包括構造器
//2. A(){}就是一個匿名內部類，可以理解成A的子類
//3. A(){} 有一個隱式的無參構造器，會呼叫super()
//4. 當你執行 new A(){} 時，會呼叫A類的 protected無參構造器
// 泛型+匿名內部類
System.out.println(a.getClass());//class com.li.t2.Test$1
}
}
4.5Map物件和JSON字串互轉
Book類見4.3
JavaJson：
package com.li.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class JavaJson {
public static void main(String[] args) {
//創建一個gson物件，做為一個工具物件使用
Gson gson = new Gson();
//5.把map物件轉成-->json字串
HashMap<String, Book> bookMap = new HashMap<>();
bookMap.put("k1", new Book(400, "射雕英雄傳"));
bookMap.put("k2", new Book(500, "楚留香傳奇"));
String strBookMap = gson.toJson(bookMap);
System.out.println("strBookMap=" + strBookMap);
//6.json字串轉成-->map物件
//new TypeToken<Map<String,Book>>(){}.getType()
//===> java.util.Map<java.lang.String, com.li.json.Book>
Map<String,Book> bookMap2 = gson.fromJson(strBookMap,
new TypeToken<Map<String,Book>>(){}.getType());
System.out.println(bookMap2);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/539329.html
標籤：其他