ajax請求中的contentType 4中常見的psot提交數據方式

application/json 四種常見的 POST 提交數據方式

轉載聲明：

本文系轉載自以下兩篇文章：

• 四種常見的 POST 提交數據方式
  作者： 滄海一滴

轉載僅爲方便學習查看，一切權利屬於原作者，本人只是做了整理和排版，如果帶來不便請聯繫我刪除。

0x01 摘要

enctype 屬性規定在發送到服務器之前應該如何對錶單數據進行編碼。
默認地，表單數據會編碼爲 “application/x-www-form-urlencoded”。就是說，在發送到服務器之前，所有字符都會進行編碼（空格轉換爲 “+” 加號，特殊符號轉換爲 ASCII HEX 值）。

enctype可選項如下：

值	描述
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
application/json
text/plain	空格轉換爲 “+” 加號，但不對特殊字符編碼。

HTTP/1.1 協議規定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT這幾種。

其中 POST 一般用來向服務端提交數據，本文主要討論 POST 提交數據的幾種方式。

HTTP 協議是以 ASCII 碼傳輸。他是建立在 TCP/IP 協議之上的應用層規範， 規定HTTP 請求分爲三個部分：

• 狀態行
• headers 請求頭
• entity-body 消息主體

類似於下面這樣：

 

<method> <request-URL> <version>
<headers>

<entity-body>

HTTP協議規定 POST 提交的數據必須放在消息主體（entity-body）中，但並沒有規定數據必須使用什麼編碼方式。實際上，開發者完全可以自己決定消息主體的格式，只要最後發送的 HTTP 請求滿足上面的格式就可以。

 

但是，數據發送出去，還要服務端解析成功纔有意義。一般服務端語言如 php、python 等，以及它們的 framework，都內置了自動解析常見數據格式的功能。服務端通常是根據請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。所以 POST 提交數據包含了 Content-Type 和消息主體編碼方式兩部分，下面就正式開始介紹它們。

0x02 application/x-www-form-urlencoded

2.1 簡介

HTTP中默認的提交數據的方式。

瀏覽器的原生 <form>表單，如果不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。請求類似於下面這樣（無關的請求頭在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
 
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

通過抓包結果我們能得到以下結論：

• Content-Type 被指定爲 application/x-www-form-urlencoded；
• 提交的數據按照 key1=val1&key2=val2 的方式進行編碼，key 和 val 都進行了 URL 轉碼。大部分服務端語言都對這種方式有很好的支持。

很多時候，我們用 Ajax 提交數據時，也是使用這種方式。例如 JQuery 和 QWrap 的 Ajax 默認的Content-Type 值都是「application/x-www-form-urlencoded;charset=utf-8」。

2.2 Spring中設置-@RequestParam

Spring中用@RequestParam來處理Content-Type爲application/x-www-form-urlencoded數據。修飾的對象可以是基本數據類型和自定義對象。

@RequestParam的原理是Spring將Request.getParameter()中的Key-Value參數Map轉化成了參數@RequestParam修飾的基本類型數據或對象。

@RequestParam同時適用於get和post，只要Content-Type爲application/x-www-form-urlencoded。

注意：使用@RequestBody接受的參數是不會被Servlet轉化統一放在request對象的Param參數集中

0x03 multipart/form-data

3.1 簡介

一個常見的 POST 數據提交的方式。我們使用表單上傳文件時，必須將 的 enctype設爲 multipart/form-data。

注意：以上兩種方式：application/x-www-form-urlencoded和multipart/form-data都是瀏覽器原生支持的。

3.2 Spring中設置

可以使用@RequestPart處理接收到的文件。

示例如下：

/**
     * 單文件上傳
     * @param file
     * @param bucket
     * @return
     */
    @RequestMapping("uploadFile")
    public JsonResult uploadFile(@RequestPart("file") MultipartFile file, @RequestParam String bucket){

        String fileUrl = aliossService.uploadFile(file, bucket);
        Map<String,String> result = new HashMap<>();
        result.put("fileUrl",fileUrl);

        return success(result);
    }

0x04 application/json

4.1 簡介

application/json作爲請求頭，用來告訴服務端消息主體是序列化的JSON字符串，除了低版本的IE，基本都支持。服務端有處理JSON的函數，使用不會有任何麻煩。

Google 的 AngularJS 中的 Ajax 功能，默認就是application/json。例如下面這段代碼：

JSvar data = {'title':'test', 'sub' : [1,2,3]};
$http.post(url, data).success(function(result) {
    ...
});

最終發送的請求是：

BASHPOST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

4.2 Spring中設置-@RequestBody

4.2.1 原理

• GET請求中，因爲沒有HttpEntity，所以@RequestBody並不適用。
• POST請求中，通過HttpEntity傳遞的參數，必須要在請求頭中聲明數據的類型Content-Type，SpringMVC通過使用HandlerAdapter 配置的HttpMessageConverters來解析HttpEntity中的數據，然後綁定到@RequestBody修飾的對象上。
• @RequestBody 也可以處理 application/xml
• @RequestBody可以和@RequestParam聯合使用，但是不建議這麼做，具體做法可以點這裏

4.2.2 示例

在springMVC中，可以用以下方式指定參數的格式爲application/json：

• 接收
  注意接收時必須用@RequestBody來修飾接收到的post body內的對象。

@RequestMapping(value = "/kill_query", method = RequestMethod.POST, consumes = "application/json; charset=utf-8")
    public ResponseEntity<String> killQuery(@RequestBody User user){} 

• 發送

@RequestMapping(value = "/user/{userId}", method = RequestMethod.GET, produces="application/json")  
@ResponseBody  
public User getUser(@PathVariable String UserId, Model model) {}  

4.3 小結

application/json 可以方便的提交複雜的結構化數據，特別適合 RESTFul 的接口。各大抓包工具如 Chrome 自帶的開發者工具、Firebug、Fiddler，都會以樹形結構展示 JSON 數據，非常友好。

0x05 text/xml

我的博客之前提到過 XML-RPC（XML Remote Procedure Call）。它是一種使用 HTTP 作爲傳輸協議，XML 作爲編碼方式的遠程調用規範。典型的 XML-RPC 請求是這樣的：

POST http://www.example.com HTTP/1.1 
Content-Type: text/xml

<?xml version="1.0"?>
<methodCall>
    <methodName>examples.getStateName</methodName>
    <params>
        <param>
            <value><i4>41</i4></value>
        </param>
    </params>
</methodCall>

XML-RPC 協議簡單、功能夠用，各種語言的實現都有。它的使用也很廣泛，如 WordPress 的 XML-RPC Api，搜索引擎的 ping 服務等等。JavaScript 中，也有現成的庫支持以這種方式進行數據交互，能很好的支持已有的 XML-RPC 服務。不過，我個人覺得 XML 結構還是過於臃腫，一般場景用 JSON 會更靈活方便。

0xFF 參考文檔

四種常見的 POST 提交數據方式
四種常見的 POST 提交數據方式+整理postman

關於更多信息，可以查看這篇文章：Http請求中Content-Type講解以及在Spring MVC註解中produce和consumes配置詳解