前言

前端向后端傳輸數據時，如果是get傳輸，直接傳在url后；如果是post傳輸，則在請求體body中傳輸。

在body中的數據格式又有兩種，一種是  json  數據格式，另一種是 字符串。具體要用哪種格式取決于后端入參的格式。

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

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

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

qs   

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

axios默認數據格式為json,所以：

1.當后端需要接收json格式的數據時,post請求頭不需要設置請求頭，數據格式也不需要我們去轉換(若數據已經是json)；

2.當后端需要接收字符串格式的數據時，我們需要給post請求頭設置{ ‘content-type’: ’application/x-www-form-urlencoded’ }，

   這個時候如果我們傳的入參是一個 js 對象，這時候我們就需要用 qs 轉換數據格式，qs具體用法如下：

 安裝模塊：npm  i  qs  -S

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

我們也可以在封裝axios的時候，給它全局設置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請求  VS   axios的post 請求的 content-type 默認值

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

  后者："application/json"

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

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

dataType：告訴服務器，我要想什么類型的數據，如果沒有指定，那么會自動推斷是返回 XML，還是JSON，還是script，還是String。

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

將自動轉換為請求字符串格式。

如果為對象，如 { name: 'edward', age: '25' }，jQuery 將自動轉化為 'name=edward&age=25'

如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

總結

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

最新評論