http之application/json與application/x-www-form-urlencoded，Query String Parameters與Request Payload，Form Data

相信很多前端小伙伴們在調后端的接口時，老是有些奇奇怪怪的問題，

content-type到底是application/json還是application/x-www-form-urlencoded？

請求形式又到底是Query String Parameters,還是Request Payload，又或是Form Data啊？

為什么我請求路徑和參數都對了還報錯，到底是前端還是后端的問題？

我花了許久時間通過node模擬后台環境整理出這篇文章，希望對大家有所幫助  (需要node代碼和請求示例代碼的可留言獲取)

 

開頭先來個無敵總結圖：

 

 

 

 注意事項：如果沒有配置content-type ，傳參的格式會決定content-type的類型！

 

1.Content-Type:application/json篇

　　本文的后端是指node的express()的請求,app.get(url, (request, response) =>{} request為后端接收到的前端請求，不懂node的沒關系，咱直接上圖：

1.1 get請求

 　　// get請求,
    // 傳參用params屬性, 瀏覽器參數形式為 Query String Parameters,后端query接收(這里的后端是指node的express暴露的請求的回調函數的request，全文都是)
    let objGet = {
      page: 1,
      size: 10
    }
    axios({
      url: "/nodeApi/list",
      method: 'get',
      params: objGet
    })

1.2 post請求

　　1.2.1 使用axios的data傳

　

　1.2.2 使用axios的params傳

    

　　 // post請求
    // 用data傳參時, 瀏覽器參數形式為 Request Payload ,后端body接收
    // 用params傳參時, 瀏覽器參數形式為 Query String Parameters ,后端query接收
    let objPost = {
      id: 1,
      name: 'testUpdate'
    }
    axios({
      url: "/nodeApi/update",
      method: 'post',
      data: objPost,
    })
    axios({
      url: "/nodeApi/update",
      method: 'post',
      params: objPost
    })

　1.3 delete請求

　　1.3.1使用axios的data傳

     

      1.3.2使用axios的params傳

    

　　 // delete請求
    // 用data傳參時, 瀏覽器參數形式為 Request Payload ,后端body接收
    // 用params傳參時, 瀏覽器參數形式為 Query String Parameters ,后端query接收
    let objDelete = {
      id: 1,
    }
    axios({
      url: "/nodeApi/del",
      method: 'delete',
      data: objDelete
    })
    axios({
      url: "/nodeApi/del",
      method: 'delete',
      params: objDelete
    })

　1.4 put請求

　　1.4.1使用axios的data傳

　　

　　1.4.2使用axios的params傳

     

    // put請求
    // 用data傳參時, 瀏覽器參數形式為 Request Payload ,后端body接收
    // 用params傳參時, 瀏覽器參數形式為 Query String Parameters ,后端query接收
    let objPut = {
      id: 1,
      name: 'testPut'
    }
    axios({
      url: "/nodeApi/put",
      method: 'put',
      data: objPut
    })
     axios({
      url: "/nodeApi/put",
      method: 'put',
      params: objPut
    })

以上就是當Content-type為application/json時所有的請求情況了，現在再回去看文章開頭的表格 是不是很清楚了。

2.Content-Type:application/x-www-form-urlencoded篇

　　2.1先說一下區別( post 舉例 )：

　　前台請求代碼：

      

　　2.1.1 application/json 傳參是傳json格式,Request Playload形式

 

　　　　view parsed: 　　 view source:

 

 

 

　　2.1.2 application/x-www-form-urlencoded 傳參是鍵值對格式，Form Data形式

　　　　view parsed:   　　 view source:

 

 

 　　后台拿到打印是這樣的：

       

 　　2.1.3 json轉成鍵值對格式

　　當content-type為application/x-www-form-urlencoded時，需要傳鍵值對，那我們一般都是操作一個json，所以需要把json轉成鍵值對。

　　上面的例子中用到了qs.stringfy,其它方法及例子：

 

 

新建了一個QQ群，群號： 775684963 有關vue和element的知識幾乎有問必答，歡迎進群~
QQ掃碼進群：