在前后端分離項(xiàng)目開發(fā)中，肯定會(huì)有前后端聯(lián)調(diào)。這時(shí)候會(huì)存在很多的問題。如：前端是否能夠找到后端；前端是否使用了正確的請(qǐng)求方式；前端是否給后端傳輸了正確的數(shù)據(jù)；后端是否給前端響應(yīng)了正確的數(shù)據(jù)等等。query string、formData和request payload的區(qū)別，你真的知道嗎？

　　現(xiàn)實(shí)和理想總有差距。當(dāng)前端傳給后端的數(shù)據(jù)是正確的，但是后端卻愣是拿不到？

　　怎么會(huì)這樣？為什么呢？

　　因?yàn)椋昂蠖说臄?shù)據(jù)格式不同。即：前端給后端傳輸?shù)臄?shù)據(jù)格式和后端接收數(shù)據(jù)的方式不匹配。以下主要說一下前端，即：只關(guān)注請(qǐng)求時(shí)的數(shù)據(jù)格式。

　　1、地址欄傳輸數(shù)據(jù)

　　1)、query string Parameters：

　　當(dāng)請(qǐng)求方式是get時(shí)，瀏覽器會(huì)使用查詢字符串的方式進(jìn)行傳遞數(shù)據(jù)，即：query string Parameters

　　查詢字符串的規(guī)則：請(qǐng)求參數(shù)使用 URL地址和“問號(hào)傳參“ 的方式進(jìn)行傳遞----用問號(hào)把url和請(qǐng)求參數(shù)分開。

　　請(qǐng)求參數(shù)的格式：以鍵值對(duì)的方式體現(xiàn)，多個(gè)鍵值對(duì)之間用&隔開。

　　假設(shè)：請(qǐng)求地址為 newsList.php。請(qǐng)求參數(shù)是pageIndex和pageCount。

　　那么，請(qǐng)求的格式為：newsList.php?pageIndex=1&pageCount=10;

　　如下圖，請(qǐng)求方式為get，在chrome瀏覽器的network里看到的是：query string Parameters

　　2、 請(qǐng)求體中傳輸數(shù)據(jù)

　　當(dāng)請(qǐng)求方式不是get(大部分情況是post或put)時(shí)，那么請(qǐng)求的數(shù)據(jù)不是在url上，而是在請(qǐng)求體里。請(qǐng)求體的英文就是：request payload。但是chrome瀏覽器針對(duì)不同的content-type有做了區(qū)分，分別是formData和request payload。

　　1)、formData

　　content-type的值是" application/x-www-form-urlencoded"或者 multipart/form-data; boundary=----WebKitFormBoundaryBoMA1XQDUpwpxKQg 時(shí)，那么，就是用的是formData的格式傳遞數(shù)據(jù)

　　2)、request payload

　　content-type的值是" text/plain"或者"application/json" 時(shí)，那么，就是用的是request payload的格式傳遞數(shù)據(jù)

　　附：默認(rèn)的數(shù)據(jù)格式：

　　1、傳統(tǒng)的ajax請(qǐng)求時(shí)候，Content-Type默認(rèn)為"文本"類型。

　　2、傳統(tǒng)的form提交的時(shí)候，Content-Type默認(rèn)為"Form"類型( application/x-www-form-urlencoded )

　　3、axios傳遞字符串的時(shí)候，Content-Type默認(rèn)為"Form"類型( application/x-www-form-urlencoded )

　　4、axios傳遞對(duì)象的時(shí)候，Content-Type默認(rèn)為"JSON"類型(( application/json)

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。