application/json

服務(wù)器端使用spring boot

@RestController
public class GreetingController {

    //解析application/json
    @RequestMapping(value = "/hello", method = RequestMethod.POST)
    public Object getJson(@RequestBody Object obj) {
        return obj;
    }

}

客戶端，原生ajax

    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function (ev) {
        console.log(xhr.readyState);
        if (xhr.readyState === 4){
            if (xhr.status === 200){
                console.log(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };

    xhr.open('POST','/hello');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ name:'zhuwei', age:'25', hobby:'ball'}))

瀏覽器請(qǐng)求詳情

1534052079504.png

application/x-www-form-urlencoded

服務(wù)端，springboot

@RestController
public class GreetingController {

    //解析application/x-www-form-urlencoded
    @RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)
    public String getForm(@RequestParam("name") String name,@RequestParam("age") String age) {
        return "name="+name+"&"+"age="+age;
    }
}

客戶端，html form 表單

<form action="/helloFormUrl" method="post">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="submit">
</form>

或者使用 ajax

    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function (ev) {
        console.log(xhr.readyState);
        if (xhr.readyState === 4){
            if (xhr.status === 200){
                console.log(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    
    //生成 post 參數(shù) params，有三種方法，選一種
    //1. 使用URLSearchParams 接口,會(huì)對(duì)內(nèi)容進(jìn)行utf8編碼
    const params = new URLSearchParams();
    params.append('name', '小明');
    params.append('age', '18');
    
    //2.使用encodeURIComponent 對(duì)內(nèi)容進(jìn)行編碼
    //好處是url中的漢字等一些特殊字符會(huì)被轉(zhuǎn)為utf8編碼，減少出錯(cuò)
    const params = "name="+encodeURIComponent("小明")+"&age="+encodeURIComponent("19")  
    
    //3.不編碼直接寫，可能服務(wù)端會(huì)解碼錯(cuò)誤
    const params = "name=小明&age=19"
   
    xhr.open('POST','http://localhost:1234/helloFormUrl');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params)

瀏覽器請(qǐng)求詳情

1534052194567.png

multipart/form-data

1.發(fā)送鍵值對(duì)

服務(wù)端，springboot（和 application/x-www-form-urlencoded 的代碼相同）

    @RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)
    public String getForm(@RequestParam("name") String name,@RequestParam("age") String age) {
        return "name="+name+"&"+"age="+age;
    }

客戶端，ajax。

注意：

1. 使用FormData()生成數(shù)據(jù)
2. 不手動(dòng)添加content-type請(qǐng)求頭

    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function (ev) {
        console.log(xhr.readyState);
        if (xhr.readyState === 4){
            if (xhr.status === 200){
                console.log(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };

   
    const params = new FormData();
    params.append('name', '朱維');
    params.append('age', '18');

    xhr.open('POST','http://localhost:1234/helloFormUrl');
   
    xhr.send(params)

1534061691216.png

2.發(fā)送文件

服務(wù)端代碼

@CrossOrigin
@RestController
public class GreetingController {

    @RequestMapping(value = "/helloFile", method = RequestMethod.POST)
    public void getFile(@RequestParam("file") MultipartFile file) {
        System.out.print(file.getSize());
    }

}

客戶端采用<input type=file>發(fā)送文件

注意：form需要加上enctype="multipart/form-data"，因?yàn)閒orm表單的默認(rèn)編碼方式是application/x-www-form-urlencoded

<form action="http://localhost:1234/helloFile" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>

或原生ajax

const file = document.querySelector('#file')
file.addEventListener('change',function(e){

  const file = e.target.files[0]
  upload(file);
})

function upload(file) {
  let xhr = new XMLHttpRequest()
  xhr.open('POST','http://localhost:1234/helloFile')
  xhr.onreadystatechange = function (){
    if(xhr.readyState === 4 && xhr.status === 200){
      console.log(xhr)
    }
   }
  const formData = new FormData()
  formData.append('geojson',file)
  formData.append('describe','ajax')
  xhr.send(formData)
}

text/plain

服務(wù)端

    @RequestMapping(value = "/helloText", method = RequestMethod.POST)
    public void getText(@RequestBody String str) {
        System.out.print(str);
    }

客戶端

    var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function (ev) {
        console.log(xhr.readyState);
        if (xhr.readyState === 4){
            if (xhr.status === 200){
                console.log(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };

    xhr.open('POST','http://localhost:1234/helloText');
    xhr.setRequestHeader('Content-Type', 'text/plain');
    xhr.send('我是小明')

1534067062907.png

總結(jié)

1. POST常用發(fā)送方式有四種，其實(shí)是http請(qǐng)求的四種content-type
   • application/json
   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain
2. 表單提交默認(rèn)使用 application/x-www-form-urlencoded，可以通過設(shè)置enctype屬性改變默認(rèn)提交方式，表單不支持application/json類型。想發(fā)json類型的請(qǐng)求，只能通過ajax。
3. 上傳文件只能通過multipart/form-data,但multipart/form-data也可以傳鍵值對(duì)

PS：本文并沒有涉及太多的細(xì)節(jié)講解，因?yàn)楸救艘彩莿傞_始學(xué)習(xí)POST請(qǐng)求，所以總結(jié)了一些學(xué)習(xí)過程中做的demo代碼，如果有寫得不恰當(dāng)?shù)牡胤?，還請(qǐng)指正。

Refrence

關(guān)于URL編碼-阮一峰
Spring web annotations
阮一峰js標(biāo)準(zhǔn)參考教程-ajax