在Web開發裡面,有前後端之分,它們之間的互動主要通過傳參的方式,但是這個傳參也分幾種形式,比如說Form表單送出、Ajax送出...今天我就在這裡總結一下開發中常見的幾種形式:
1. Form表單送出
這種方式是最原始最常見的方式,送出的時候也有可能是通過js觸發,其請求頭Content-Type為: application/x-www-form-urlencoded,示例如下:
前端代碼:
姓名:
年齡:
後端接收:
var_dump($_POST['name']);
var_dump($_GET['age']);
var_dump($_REQUEST['age]);
請求頭:

這種送出方式也是ajax預設的送出方式,請求參數是以key-value鍵值對的形式傳遞到後端,在PHP裡面通$_POST等超全局變量就可以擷取到,簡單實用。其未經解析的原始的資料其實是:name=PHP&age=25

2. JSON形式送出
這種形式,需要設定一下請求頭Content-Type為application/json,執行個體如下:
前端代碼:
$.ajax({
type: 'POST',
url: "backend.php",
data: {
'name': 'hello',
'age': 15,
},
contentType: 'application/json',
dataType: "json",
success: function (data) {
console.log(data);
}
});
請求頭:

從上面的截圖可以看到,請求參數那裡變成Request Payload,雖然格式上看上去和之前form送出差不多,但是這時候如果背景用$_POST這類方法是無法擷取的,需要換一種方式:
$input = file_get_contents('php://input');
上面這種方式擷取到的内容是字元串: name=Jun&age=15,在這個例子裡面反而不容易處理了,實際上采用json這種方式送出的參數的話,一般都是把需要的資料封裝成json格式送出,在js裡面就是把資料放到對象裡面,然後序列化:
var data = {
'name': 'Jun',
'age': 15,
};
$.ajax({
type: 'POST',
url: "backend.php",
data: JSON.stringify(data),
contentType: 'application/json',
dataType: "json",
success: function (data) {
console.log(data);
}
});
這是再檢視請求頭:

可以看到參數變成json格式,這時候PHP後端就可以采用json_decode函數去擷取參數:
$input = json_decode(file_get_contents('php://input'), true);
3.檔案上傳
一般上傳圖檔等各種檔案的時候用的到,Content-Type是 multipart/form-data
請求頭類似如下:
------WebKitFormBoundary63FiWN3UoYxd8OT6
Content-Disposition: form-data; name="UploadFile"; filename="QQ截圖20170925101502.png"
Content-Type: image/png
------WebKitFormBoundary63FiWN3UoYxd8OT6
Content-Disposition: form-data; name="sid"
sid
------WebKitFormBoundary63FiWN3UoYxd8OT6
Content-Disposition: form-data; name="fun"
add
------WebKitFormBoundary63FiWN3UoYxd8OT6
Content-Disposition: form-data; name="mode"
4. 總結
這幾種方式功能上說沒什麼差別,都能實作資料的送出,大家選擇自己喜歡的方式就行,最重要的是前後端協調好, 雖然這裡後端是以PHP為例,但是其他語言也是大同小異。最後,再說一下數組送出,這個倒不是新的送出方式,我這裡是指遇到那種一個字段送出多個資料的情況,比如說删除多個文章,一般前端需要傳多個id,舉例子字段名字叫ids,一般有這2種方案:
1. 逗号相隔

這樣傳參,後端擷取到之後是一個字元串,在PHP裡面可以用explode這樣的函數去把字元串拆分成數組,非常友善,當然你也可以選擇其他分隔符,比如說“-”,“+”等字元。
2. JSON形式
這就是文中說的第二種方式,把id放在數組裡面以json方式傳到背景,這樣背景可以直接擷取到一個數組.
