json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這里說的json指的是類似於javascript對象的一種數據格式。
json的作用：在不同的系統平台，或不同編程語言之間傳遞數據。
// json數據的對象格式：
{ "name":"tom", "age":18}
// json數據的數組格式：
["tom",18,"programmer"]
復雜的json格式數據可以包含對象和數組的寫法。
1 { 2 "name":"小明", 3 "age":200, 4 "fav":["code","eat","swim","read"], 5 "son":{ 6 "name":"小小明", 7 "age":100, 8 } 9 } 10 11 // 數組結構也可以作為json傳輸數據。
json數據可以保存在.json文件中，一般里面就只有一個json對象
總結概述:
1. json文件的后綴是json 2. json文件一般保存一個單一的json數據對象 3. json數據的屬性不能是方法或者undefined，屬性值只能：數值、字符串、對象和數組 4. json數據只使用雙引號、每一個屬性成員之間使用逗號隔開，並且最后一個成員沒有逗號。 { "name":"小明", "age":200, "fav":["code","eat","swim","read"], "son":{ "name":"小小明", "age":100 } }
| 方法 | 參數 | 返回值 | 描述 |
|---|---|---|---|
| stringify | json對象 | 字符串 | json對象轉成字符串 |
| parse | 字符串 | json對象 | 字符串格式的json數據轉成json對象 |
示例代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var json_obj = {
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
};
// json對象轉換成字符串格式的json數據
var data_str = JSON.stringify(json_obj);
console.log( data_str );
// 字符串格式的json數據轉換成json對象
var data_json = JSON.parse(data_str);
console.log( data_json );
</script>
</head>
<body>
</body>
</html>
結果如下:
ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：異步js和xml數據傳輸數據。
開發中ajax是很常用的技術，主要用於操作后端提供的數據接口，從而實現網站的前后端分離。
ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就可以與后端進行數據通信。
2.1 數據接口
數據接口，也叫api接口，表示后端提供操作數據/功能的url地址給客戶端使用。
客戶端通過發起請求向服務端提供的url地址申請操作數據【操作一般：增刪查改】,同時在工作中，大部分數據接口都不是手寫，而是通過函數庫/框架來生成。
在開發Web應用中，有兩種應用模式：
-
前后端不分離
前后端分離
ajax的使用必須與服務端程序配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python代碼的編寫。因此，我們可以使用別人寫好的數據接口進行調用。
jQuery將ajax封裝成了一個函數$.ajax()，我們可以直接用這個函數來執行ajax請求。
請求形式:
1. 發送ajax請求，要通過$.ajax()，參數是對象，里面有固定的參數名稱。
$.ajax({
"url":"數據接口url地址",
"method":"http請求方式，前端只支持get和post",
"dataType":"設置服務器返回的數據格式，常用的json，html，jsonp，默認值就是json",
// 要發送給后端的數據參數，post時，數據必須寫在data，get可以寫在data,也可以跟在地址欄?號后面
"data":{
"數據名稱":"數據值",
}
}).then(function(resp){ // ajax請求數據成功時會自動調用then方法的匿名函數
console.log( resp ); // 服務端返回的數據
}).fail(function(error){ // ajax請求數據失敗時會自動調用fail方法的匿名函數
console.log( error );
});
2. ajax的使用往往配合事件操作進行調用。
詳細示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(function(){ $("#btn").on("click",function(){ $.ajax({ // 后端程序的url地址 url: 'http://wthrcdn.etouch.cn/weather_mini', // 也可以使用method，提交數據的方式，默認是'GET'，常用的還有'POST' type: 'get', dataType: 'json', // 返回的數據格式，常用的有是'json','html',"jsonp" data:{ // 設置發送給服務器的數據，如果是get請求，也可以寫在url地址的?后面 "city":'深圳', } }) .done(function(resp) { // 請求成功以后的操作 $('#ganmao').html(resp.data.ganmao) }) .fail(function(error) { // 請求失敗以后的操作 console.log(error); }); }); }) </script> </head> <body> <button id="btn">點擊獲取數據</button> <p id="ganmao"></p> </body> </html>
另外兩種jquery的簡寫形式:
// 發送get請求
// 參數1：數據接口的請求地址
// 參數2：發送給接口地址的數據參數
// 參數3：ajax請求成功以后，調用的匿名函數，匿名函數的第一個參數還是服務端返回的數據
// 參數4：設置服務端返回的數據格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
// 發送post請求
// 參數1：數據接口的請求地址
// 參數2：發送給接口地址的數據參數
// 參數3：ajax請求成功以后，調用的匿名函數，匿名函數的第一個參數還是服務端返回的數據
// 參數4：設置服務端返回的數據格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");