陳新龍

前端與后端是如何進(jìn)行數(shù)據(jù)交互的呢？登錄網(wǎng)站時(shí)系統(tǒng)是如何將我們輸入的用戶名和密碼數(shù)據(jù)傳輸?shù)椒?wù)器進(jìn)行登錄校驗(yàn)的呢？這就涉及JSON 數(shù)據(jù)格式的知識(shí)了。

JSON是一種非常重要的數(shù)據(jù)格式，它并不是編程語(yǔ)言，而是一種可以在服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)格式。因?yàn)閄ML 整合到HTML 中各個(gè)瀏覽器實(shí)現(xiàn)的細(xì)節(jié)不盡相同，所以道格拉斯·克羅克福特和奇普·莫寧斯達(dá)一起從JS 的數(shù)據(jù)類(lèi)型中提取了一個(gè)子集，作為新的數(shù)據(jù)交換格式，因?yàn)橹髁鞯臑g覽器使用了通用的JavaScript 引擎組件，所以在解析這種新數(shù)據(jù)格式時(shí)就不存在兼容性問(wèn)題，于是他們便將這種數(shù)據(jù)格式命名為“JavaScriptObject Notation”，簡(jiǎn)稱(chēng)JSON。

我們需要了解JSON 的結(jié)構(gòu)形式、數(shù)據(jù)類(lèi)型、使用場(chǎng)景以及注意事項(xiàng)。

這個(gè)簡(jiǎn)單的前端頁(yè)面中有一個(gè)提交表單，表單中包含用戶名輸入框（username）和密碼輸入框（password），以及登錄按鈕（如圖1）。

輸入用戶名和密碼后點(diǎn)擊登錄按鈕，頁(yè)面會(huì)向“l(fā)oginDemo/login”發(fā)起一個(gè)POST 請(qǐng)求；請(qǐng)求發(fā)出后，需要Java 寫(xiě)的后端程序來(lái)接受該請(qǐng)求。請(qǐng)求會(huì)打印出賬號(hào)和密碼，F(xiàn)12 打開(kāi)瀏覽器控制臺(tái)觀察傳過(guò)去的值，username= 小陳老師&password=123456，其中中文經(jīng)過(guò)編碼處理。其實(shí)這是QueryString 的一種格式，并不是我們所希望獲得的JSON格式（如圖2）。

JSON 有雨刷兩種結(jié)構(gòu)形式，鍵值對(duì)形式和數(shù)組形式。鍵值對(duì)形式比較簡(jiǎn)單：

{"username"：" 小陳老師"，"age"：23，"password"："123456}

這種結(jié)構(gòu)的JSON 數(shù)據(jù)規(guī)則是：一個(gè)無(wú)序的“名稱(chēng)/ 值”集合。對(duì)象以大括號(hào)表示開(kāi)始和結(jié)束。每一組鍵值對(duì)之間使用逗號(hào)分隔，每組名稱(chēng)和值之間用冒號(hào)分隔。這種key-value 形式使用較普遍。

JSON 的數(shù)組形式：

["one"， 18， "two"， " 浙江省寧波市"]

這和Python 中的list 列表有點(diǎn)相似。數(shù)組形式的JSON數(shù)據(jù)就是值（value）的有序集合。數(shù)組以左中括號(hào)開(kāi)始右中括號(hào)結(jié)束，值之間用逗號(hào)分隔。

我們通過(guò)Postman工具演示將賬號(hào)和密碼以JSON 的形式傳送至服務(wù)端。在Postman 工具中將默認(rèn)的QueryString格式調(diào)整為JSON 數(shù)據(jù)格式，可以看到一對(duì)大括號(hào)中包含了賬號(hào)和密碼。后端的代碼正確接收到了數(shù)據(jù)（如圖3）。

JSON較多應(yīng)用在接口返回?cái)?shù)據(jù)和序列化，WEB 應(yīng)用中大部分?jǐn)?shù)據(jù)接口以JSON格式返回（也存在XML 格式），還有AJxa異步訪問(wèn)數(shù)據(jù)，RPC 遠(yuǎn)程調(diào)用，前后端分離后端返回的數(shù)據(jù)，開(kāi)發(fā)API 接口（百度、高德）等。