在Web開(kāi)發(fā)里面，有前后端之分腋颠，它們之間的交互主要通過(guò)傳參的方式涮坐，但是這個(gè)傳參也分幾種形式，比如說(shuō)Form表單提交映屋、Ajax提交...今天我就在這里總結(jié)一下開(kāi)發(fā)中常見(jiàn)的幾種形式：
1. Form表單提交
這種方式是最原始最常見(jiàn)的方式苟鸯，提交的時(shí)候也有可能是通過(guò)js觸發(fā)，其請(qǐng)求頭Content-Type為: application/x-www-form-urlencoded棚点，示例如下：
前端代碼：
<body>
<form action="backend.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="name">年齡:</label>
<input type="text" id="age" name="age">
<input type="submit" value="提交">
</form>
</body>
后端接收：
<?php
var_dump($_POST['name']);
var_dump($_GET['age']);
var_dump($_REQUEST['age]);
請(qǐng)求頭：
這種提交方式也是ajax默認(rèn)的提交方式,請(qǐng)求參數(shù)是以key-value鍵值對(duì)的形式傳遞到后端,在PHP里面通$_POST等超全局變量就可以獲取到,簡(jiǎn)單實(shí)用早处。其未經(jīng)解析的原始的數(shù)據(jù)其實(shí)是：name=PHP&age=25
2. JSON形式提交
這種形式，需要設(shè)置一下請(qǐng)求頭Content-Type為application/json瘫析，實(shí)例如下：
前端代碼：
$.ajax({
type: 'POST',
url: "backend.php",
data: {
'name': 'hello',
'age': 15,
},
contentType: 'application/json',
dataType: "json",
success: function (data) {
console.log(data);
}
});
請(qǐng)求頭：
從上面的截圖可以看到砌梆，請(qǐng)求參數(shù)那里變成Request Payload，雖然格式上看上去和之前form提交差不多贬循，但是這時(shí)候如果后臺(tái)用$_POST這類方法是無(wú)法獲取的咸包，需要換一種方式：
$input = file_get_contents('php://input');
上面這種方式獲取到的內(nèi)容是字符串: name=Jun&age=15，在這個(gè)例子里面反而不容易處理了杖虾，實(shí)際上采用json這種方式提交的參數(shù)的話烂瘫，一般都是把需要的數(shù)據(jù)封裝成json格式提交，在js里面就是把數(shù)據(jù)放到對(duì)象里面奇适，然后序列化：
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);
}
});
這是再查看請(qǐng)求頭：
可以看到參數(shù)變成json格式坟比，這時(shí)候PHP后端就可以采用json_decode函數(shù)去獲取參數(shù)：
$input = json_decode(file_get_contents('php://input'), true);
3.文件上傳
一般上傳圖片等各種文件的時(shí)候用的到，Content-Type是 multipart/form-data
請(qǐng)求頭類似如下：
------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. 總結(jié)
這幾種方式功能上說(shuō)沒(méi)什么區(qū)別嚷往，都能實(shí)現(xiàn)數(shù)據(jù)的提交葛账，大家選擇自己喜歡的方式就行，最重要的是前后端協(xié)調(diào)好, 雖然這里后端是以PHP為例皮仁，但是其他語(yǔ)言也是大同小異籍琳。最后，再說(shuō)一下數(shù)組提交贷祈，這個(gè)倒不是新的提交方式巩割，我這里是指遇到那種一個(gè)字段提交多個(gè)數(shù)據(jù)的情況，比如說(shuō)刪除多個(gè)文章付燥，一般前端需要傳多個(gè)id宣谈，舉例子字段名字叫ids，一般有這2種方案：
1. 逗號(hào)相隔
這樣傳參键科，后端獲取到之后是一個(gè)字符串闻丑，在PHP里面可以用explode這樣的函數(shù)去把字符串拆分成數(shù)組，非常方便勋颖，當(dāng)然你也可以選擇其他分隔符嗦嗡，比如說(shuō)“-”，“+”等字符饭玲。
2. JSON形式
這就是文中說(shuō)的第二種方式侥祭，把id放在數(shù)組里面以json方式傳到后臺(tái)，這樣后臺(tái)可以直接獲取到一個(gè)數(shù)組.
