如果您决定在AJAX
库或服务器语言之间切换,则使事情变得更容易和通用。随着axios
使用原生JS FormData
。
如果你有一个对象中的数据,你可以将它转换成FormData
这样:
var myDataObj = {id:1, name:"blah blah"}
var formData = new FormData();
for (var key in myDataObj) {
formData.append(key, myDataObj[key])
}
然后你发送数据:
axios.post('/sub/process.php', formData, {
params: { action: "update-user" },
headers: { 'Content-Type': 'multipart/form-data' },
baseURL: 'http://localhost',
}).then(data =>
console.log(data)
).catch(err => {
console.log(err)
return null
})
请注意,您还可以使用params
in发送一些信息axios
,您可以使用$_GET
. 另请注意,我使用 baseURL 以防万一您的网页和 API 端点有不同的服务器。
您还需要了解,在axios
发送真正的请求之前,它会执行一个preflight
请求。预检请求是浏览器在 CORS 中检查资源目的地是否愿意接受真实请求的机制。毕竟,当目标主机无论如何都不愿意接收它时,为什么要发送请求?
您必须确保您的服务器具有适用于您的 axios 请求的正确标头,否则预检请求将检测到不兼容并停止您的请求:
//this is if you are using different different origins/servers in your localhost, * to be update with the right address when it comes to production
header('Access-Control-Allow-Origin: *');
//this is if you are specifying content-type in your axios request
header("Access-Control-Allow-Headers: Content-Type");
现在,您将能够访问$_POST
变量中发送的数据:
echo "<pre>";
print_r($_POST);
echo "</pre>";
此外,axios 允许您以不同格式发送数据。你可以像这样发送一个json:
axios.post('/sub/process.php', { id: "1", name:"blablah" }, {
params: { action: "update-item" },
headers: { 'Content-Type': 'application/json' },
baseURL: 'http://localhost',
}).then(data =>
console.log(data)
).catch(err => {
console.log(err)
return null
})
在PHP端,可以这样访问:
$data = json_decode(file_get_contents("php://input"),true);
echo "<pre>";
print_r($data);
echo "</pre>";