前端開(kāi)發(fā)中要想實(shí)現(xiàn)與后端的交互那就少不了要向后端提交數(shù)據(jù)或請(qǐng)求數(shù)據(jù)，這時(shí)傳參的方式主要有兩種：且這兩種方式主要是通過(guò)改變請(qǐng)求頭的Content-Type屬性來(lái)實(shí)現(xiàn)的，一般請(qǐng)求默認(rèn)使用application/x-www-form-urlencoded編碼數(shù)據(jù)，此時(shí)傳參形式為Form Data，如果是application/json或multipart/form-data的話(huà)，則傳參形式為 request payload
的方式。

Content-Type是指http/https發(fā)送信息至服務(wù)器時(shí)的內(nèi)容編碼類(lèi)型，contentType用于表明發(fā)送數(shù)據(jù)流的類(lèi)型，服務(wù)器根據(jù)編碼類(lèi)型使用特定的解析方式，獲取數(shù)據(jù)流中的數(shù)據(jù)。

常用的Content-Type有如下：

text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,
application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml

其中：text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif, 都是常見(jiàn)的頁(yè)面資源類(lèi)型。

application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml 這四個(gè)是ajax的請(qǐng)求，表單提交或上傳文件的常用的資源類(lèi)型。

方式一： 通過(guò)Form Data形式傳參

ContentType都是默認(rèn)的值 application/x-www-form-urlencoded, 這種編碼格式的特點(diǎn)是：name/value值對(duì)，
每組之間使用&連接，而name與value之間是使用 = 連接，比如 key=xxx&name=111&password=123456;

1.jpg

后端可以通過(guò)request.getParameter(name)的形式來(lái)獲取表單參數(shù)。

方式二： 通過(guò)Request Payload形式傳參

application/json是以json形式將數(shù)據(jù)發(fā)送給服務(wù)器，對(duì)于一些復(fù)制的數(shù)據(jù)對(duì)象，對(duì)象里面再嵌套數(shù)組的話(huà)，建議使用application/json傳遞比較好

2.jpg

后端可以使用getRequestPayload方法來(lái)獲取。

注意

當(dāng)請(qǐng)求頭的Content-Type為application/json時(shí)瀏覽器認(rèn)為該請(qǐng)求為復(fù)雜請(qǐng)求，這時(shí)瀏覽器會(huì)先進(jìn)行一次預(yù)請(qǐng)求,執(zhí)行一次OPTIONS 請(qǐng)求，向服務(wù)器求證該請(qǐng)求是否合法，如果服務(wù)器沒(méi)有給出正確回應(yīng)瀏覽器會(huì)報(bào)跨域請(qǐng)求導(dǎo)致請(qǐng)求失敗

一般這三種方式會(huì)導(dǎo)致這種現(xiàn)象:

1:請(qǐng)求的方法不是GET/HEAD/POST

2:POST請(qǐng)求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

3:請(qǐng)求設(shè)置了自定義的header字段

參考

HTTP請(qǐng)求中 request payload 和 formData 區(qū)別？