前言

前端向后端傳輸數(shù)據(jù)時(shí)，如果是get傳輸，直接傳在url后；如果是post傳輸，則在請(qǐng)求體body中傳輸。

在body中的數(shù)據(jù)格式又有兩種，一種是  json  數(shù)據(jù)格式，另一種是 字符串。具體要用哪種格式取決于后端入?yún)⒌母袷健?/p>

如果后端接收json數(shù)據(jù)類型，post 的 headers 需要設(shè)置 { ‘content-type’: ’application/json’ }，傳給后端的數(shù)據(jù)就形如  { ‘name’:’edward’, ‘age’:’25’ } 

如果后端接收的是（表單）字符串類型，post 的 headers 需設(shè)置  { ‘content-type’: ’application/x-www-form-urlencoded’ }，

，傳輸給后端的數(shù)據(jù)就形如   ‘name=edward&age=25’  

qs   

qs.stringfy() 將對(duì)象序列化成URL的形式

axios默認(rèn)數(shù)據(jù)格式為json,所以：

1.當(dāng)后端需要接收json格式的數(shù)據(jù)時(shí),post請(qǐng)求頭不需要設(shè)置請(qǐng)求頭，數(shù)據(jù)格式也不需要我們?nèi)マD(zhuǎn)換(若數(shù)據(jù)已經(jīng)是json)；

2.當(dāng)后端需要接收字符串格式的數(shù)據(jù)時(shí)，我們需要給post請(qǐng)求頭設(shè)置{ ‘content-type’: ’application/x-www-form-urlencoded’ }，

   這個(gè)時(shí)候如果我們傳的入?yún)⑹且粋€(gè) js 對(duì)象，這時(shí)候我們就需要用 qs 轉(zhuǎn)換數(shù)據(jù)格式，qs具體用法如下：

 安裝模塊：npm  i  qs  -S

import qs from 'qs';
const data = { name:'edward' , age:'25'};  // 我們傳的是 js 對(duì)象
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),   // 用 qs 將js對(duì)象轉(zhuǎn)換為字符串 'name=edward&age=25'
  url: 'http://www.edward.com'
}; axios(options);

我們也可以在封裝axios的時(shí)候，給它全局設(shè)置qs 

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

【區(qū)分】： JSON.stringfy()  和 qs.stringfy() 

  let  data = { name: 'edward', age: '25' }

  前者：JSON.stringfy(data)  //  ”{ 'name' : 'edward' , 'age' : '25' }”

  后者：qs.stringfy(data)  // 'name=edward&age=25'

【區(qū)分】：jQuery 中 $.ajax 的post請(qǐng)求  VS   axios的post 請(qǐng)求的 content-type 默認(rèn)值

  前者："application/x-www-form-urlencoded"

  后者："application/json"

$.ajax({
   type: 'POST',
   contentType: 'application/json;charset=utf-8', // 發(fā)送的數(shù)據(jù)類型
   dataType: 'json',   // 接收的數(shù)據(jù)類型
   url: 'http://www.edward.com',
   data: JSON.stringfy(formData),
   success: function (res) {
      console.log(res.data)
   }
})　

contentType: 告訴服務(wù)器，我要發(fā)什么類型的數(shù)據(jù)

dataType：告訴服務(wù)器，我要想什么類型的數(shù)據(jù)，如果沒有指定，那么會(huì)自動(dòng)推斷是返回 XML，還是JSON，還是script，還是String。

注意 ：$.ajax() post發(fā)送到服務(wù)器的數(shù)據(jù)。

將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。

如果為對(duì)象，如 { name: 'edward', age: '25' }，jQuery 將自動(dòng)轉(zhuǎn)化為 'name=edward&age=25'

如果為數(shù)組，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。

總結(jié)

到此這篇關(guān)于axios中post請(qǐng)求json和application/x-www-form-urlencoded詳解的文章就介紹到這了,更多相關(guān)axios post請(qǐng)求json內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論