jQuery json

概念

當今做軟體已經不局限在一臺機器上，很多臺，如：聯網游戲、電商網站背后都是服務器的集群，數十臺到數萬臺的規模，那這些計算機要連接起來干大事，就必須做一件事，什么事呢？互相之間傳遞資料，
我們大家知道計算機通過網路連接，網路中最主流是通過TCP/IP協議進行傳輸，那軟體呢？我們的軟體之間如何傳遞資料呢？如你有個生產系統，要去人力系統中獲取人員資訊，這要怎么傳遞資料呢？java物件可不能直接傳輸的，
早期我們使用txt，甚至專門有報文，但都只有資料沒有說明不好識別，業界就推出了xml，有格式，有說明，有資料，但無關的內容又太多了，甚至標簽所占的量遠超了資料，業界就推出了JSON，輕量級，就幾個括號，[]、{}、:，“”搞定格式，這下了不得，一下打敗占領市場數十年的xml，一同全球，

那什么是JSON呢？

JSON(JavaScript Object Notation，JS 物件簡譜)
起名不咋地，非常拗口，我們就記住它是一種輕量級的資料交換格式即可，
它基于 ECMAScript(js規范)的一個子集，采用完全獨立于編程語言的文本格式來存盤和表示資料，
簡潔和清晰的層次結構使得 JSON成為理想的資料交換語言，是xml的終結者，成為主流開發方式（ajax異步請求，json回傳），

json字串：

[   //陣列
{   //一條記錄
"p":"3999.00",  //鍵值對: k,v
"op":"2499.00", 
"cbf":"0",
"id":"J_100007043753",
"m":"10000.00"
}
]

結構特點：

map結構: k,v
“p”:“3999.00”, 價格
“id”:“J_100007043753”, 編號

陣列[ ]
一條記錄{ }，多條記錄用逗號隔開 { },{ }，最后一條沒有逗號
鍵值對 “p”:“2499.00”，kv用雙引號括，多個用逗號隔開

轉換

JSON已經作為瀏覽器內置支持，所以我們可以直接使用JSON物件：
json轉obj JSON.parse(“json”)
obj轉json JSON.stringify(obj)

獲取京東商品價格

1）實作前期系結和后期系結事件
網上常見支付
a. 把支付按鈕消失
b. 把支付按鈕禁止，增加提示：您已經支付了，請稍后

京東提供多個獲取結果手段: 玩爬蟲

京東獲取某個商品100007043753的價格

請求鏈接：

https://item.jd.com/100007043753.html 商品詳情

https://item.jd.com/100007043747.html#none 商品價格

測驗獲取京東商品價格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//京東商品價格地址：https://p.3.cn/prices/mgets?skuIds=J_100009077449
			//js可以單引號括起來雙引號，或者雙引號中單引號括起來
			var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
			console.log( jsonstr );
			
			//js提供JSON工具，對json字串進行轉換，js物件
			var jsonobj = JSON.parse( jsonstr );
			console.log( jsonobj );
		</script>
	</body>
</html>

網頁效果:

在這里插入圖片描述

決議京東獲取商品價格的json字串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>決議京東獲取商品價格的json字串</h1>
		<div>
			商品的編號：<br />
			<span id="id"></span>
		</div>
		<div>
			商品的價格：<br />
			<span id="price"></span>
		</div>
	</body>
	<script>
		//獲取json字串，再次改造ajax去京東網站獲取到這個內容
		var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
		//先把json字串轉換js物件
		var jsonobj = JSON.parse( jsonstr );
		//獲取到陣列，拿陣列的第一條記錄
		var rs = jsonobj[0];
		var price = rs.p;	//javascript物件語法，rs物件獲取p屬性值
		console.log(price);
		var id = rs.id.substring(2);	//通過js截串函式substring，從第3個字符截取到最后
		console.log(id);
		
		$("#id").text(id);
		$("#id").css("color", "blue");		//設定樣式 color:blue;
		$("#price").text(price);
		$("#price").css("color", "red");	//設定樣式：color:red;
	</script>
</html>

網頁效果:

在這里插入圖片描述

h5+css3 = json = ajax = 京東網站

使用ajax 的技術，可以發起請求request，
連接到京東后臺(java springmvc) 都資料庫去處理，到資料庫中查詢這個商品的價格資訊，
回傳回應response，轉換json字串，

jQuery Ajax

在這里插入圖片描述

ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和XML），是指一種創建互動式、快速動態網頁應用的技術，
早期只有同步的方式，多個請求，只能順序執行，只能等待執行，
有了ajax異步技術，可以無需等待上一個請求執行完成，就可以直接發起請求，
服務端回傳后，ajax通過回呼技術通知客戶端程式，把回應的結果傳遞給用戶事先寫好的回呼函式，通過在后臺與服務器進行少量資料交換，Ajax 可以使網頁實作異步更新，
這意味著可以在不重新加載整個網頁的情況下，對網頁進行區域更新，提升網頁的效率，用戶無需等待頁面的重繪，嗖的一下內容就變化了，改變原有整個頁面重繪，造成頁面晃眼的現象，所以這項技術一出現，就得到業界的推崇，

關鍵字：異步、回呼、區域重繪，

引數詳解

八個引數：

$.ajax({				//$.get，$.post，$.getJSON
	async:				//請求同步異步，默認true異步
	type:				//請求型別：GET/POST				
	url:				//請求的網站地址 https://p.3.cn/prices/mgets
	data:				//提交的資料，引數 ? skulds = j_100009077449
	contentType:        //請求的MIME媒體型別：application/x-www-form-urlencoded（默認）、application/json;charset=UTF-8 不會中文亂碼了
	dataType:			//服務器回傳MIME型別：xml/html/script/json/jsonp
	success: function(data){	//請求成功回呼函式，data封裝網站回傳的資料
		console.log( data );
	},
	error: function(e){		//請求失敗回呼函式，e封裝錯誤資訊
		console.log(e.status);			//狀態碼
		console.log(e.responseText);	//錯誤資訊
	}
})

必須訪問外網網站，訪問京東，沒有網路這個案例是做不出來的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>決議京東獲取商品價格的json字串</h1>
		<div>
			商品的編號：<br />
			<span id="id"></span>
		</div>
		<div>
			商品的價格：<br />
			<span id="price"></span>
		</div>
	</body>
	<script>
		//發起ajax請求,{}引數的集合
		$.ajax({
			//請求同步異步，默認true異步
			async: true,
			
			//請求型別：GET/POST
			type: "POST",	
			
			//請求的網站地址 https://p.3.cn/prices/mgets
			url: "https://p.3.cn/prices/mgets",	//請求地址
			
			//提交的資料，引數 ? skulds = j_100009077449
			data: {	  //請求引數
				//? skulds = j_100009077449
				"skuIds": "J_100009077449"	   //引數格式k:v
			},
			
			//請求的MIME媒體型別 不會中文亂碼了
			contentType: "application/json;charset=utf-8;",	
			
			//服務器回傳MIME型別：xml/html/script/json/jsonp
			dataType: "jsonp",	  //回傳型別
			
			//請求成功回呼函式，data封裝網站回傳的資料
			success: function( data ){	
			    console.log(data)
				
			//決議回傳值，把編號和結果在頁面中展現出來
			var price = data[0].p;
			var id = data[0].id.substring(2);

			
			$("#id").text(id);
			$("#id").css("color", "blue");		//設定樣式 color:blue;
			$("#price").text(price);
			$("#price").css("color", "red");	//設定樣式：color:red;
			},
			
			//請求失敗回呼函式，e代表錯誤狀態號和例外資訊
			error: function( e ){	  
				console.log(e.status);			//狀態碼
				console.log(e.responseText);	//錯誤資訊
			}
		})
	</script>
</html>

在這里插入圖片描述

如果代碼不執行，說明是環境的問題

如果我的代碼執行不正常，說明是環境問題
如果我的代碼執行正常，代碼寫錯
一段一段來除錯

Access-Control-Allow-Origin 不能使用跨域請求
localhost，另外一個ip地址（網址）默認是允許
jsonp支持跨域請求

小結：

1）javascript升級jQuery，js庫，稱不上框架

2）改革
訪問形式，冗長代碼，$()=document物件
js功能很簡單，jQuery牛 .attr()，.css 更簡潔操作方式
jQuery統治業界10年，Vue出現，真正框架
jQuery開始衰落，不至于徹底消失，市場占有率變小
了解這個技術，會用即可，

3）js和jQuery寫法差異：選擇器

a. 標簽
document.getElementsByTagName	$("h1")
b. class修飾
document.getElementsByClassName	$(".title")
c. name修飾
document.getElementsByName	$("[input:name='username']")
d. id修飾
document.getElementById		$("#price") 推薦方式

js

document.getElementById(“username”).value = “abc”;

動態去設定樣式表，代碼非常繁瑣，還不如自己的sytle xxx

jQuery

$("#username").val("abc");
$("#username").css("color","red");
$("#username").css("font-size", 24);

js習慣使用前期系結方式，jQuery習慣使用后期系結方式
前期系結非常好看，在標簽上 οnclick=“method()”，

$("btnOK").click(function(){

})

java，javascript 是在方法體內，this直接使用
jQuery 它的寫法：$(this)

json是javascript子集，它非常厲害，它非常簡潔表達我們資料

<resultset><id>123456</id><price>3000</price></resultset>表達方式XML
{"id": "123456", "price":3000 }	JSON

JSON就成為資料在網路傳輸中介質

把后臺回傳的JSON在頁面進行決議：
JSON物件，瀏覽器直接集成，自帶
JSON.parse( json字串 ) 把json格式字串轉成js物件，obj.p 可以直接訪問里面元素
JSON.stringify( js物件）把js物件轉換json字串，傳輸資料

鏈接外網，訪問京東網站
ajax提交，json回傳

js的ajax寫法很繁瑣，
jQuery的ajax寫法

var obj = new Object();
var obj = {}

$.ajax(obj) ajax方法，{}代表js物件
({
	async 同步，異步true，默認
	type GET/POST，習慣POST
	url 請求網站地址
	data 鏈接的引數
	contentType 固定值：application/json;charset=utf8;
	dataType 回傳值型別：json/jsonp
	success: function( data ){  data網站回傳內容封裝到這個物件
	}
	error: function( e ){
		e.status 狀態號 404,505
		e.responseText 錯誤資訊
	}
})

jQuery、JSON、Ajax 前后臺實作貫穿

往期內容：

前端技術jQuery+Json+Ajax+NodeJS

傳送鏈接 https://blog.csdn.net/QQ1043051018/article/details/112348056

網頁三劍客，html/css/javascript

傳送鏈接 https://editor.csdn.net/md/?articleId=112363795

javaScript基礎 ES6高級語法

傳送鏈接 https://blog.csdn.net/QQ1043051018/article/details/112309559

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246859.html

標籤：其他

上一篇：前臺修改表格后，有幾率不彈出提示框（既沒有成功框，也沒有失敗框），怎么回事？

下一篇：ajax接收servlet的資料data，傳入Layui的資料表格

前端技術Json+Ajax+NodeJS

jQuery json

概念

那什么是JSON呢？

json字串：

結構特點：

轉換

獲取京東商品價格

京東提供多個獲取結果手段: 玩爬蟲

京東獲取某個商品100007043753的價格

請求鏈接：

測驗獲取京東商品價格

網頁效果:

決議京東獲取商品價格的json字串

網頁效果:

h5+css3 = json = ajax = 京東網站

jQuery Ajax

引數詳解

必須訪問外網網站，訪問京東，沒有網路這個案例是做不出來的

如果代碼不執行，說明是環境的問題

小結：

js

jQuery

往期內容：

前端技術jQuery+Json+Ajax+NodeJS

網頁三劍客，html/css/javascript

javaScript基礎 ES6高級語法