前传
很久以前有个前端想学习fetch的用法,于是他用php写了一个接受post请求的接口,然后前台写了一个使用fetch请求PHP接口的demo,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<button onclick="loginbtn();">提交</button>
</body>
<script>
function loginbtn(){
console.log("开始请求。。。");
let params = {'id':"123"};
fetch("http://localhost/myshop/myshop/data/test1.php",{
method:"POST",
mode:'no-cors',
headers:{},
body:params
}).then(function(response){
console.log(response);
})
}
</script>
</html>
结果发现后台获取不了数据,于是他开始向伟大的度娘求救了,度娘告诉他一个方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<button onclick="loginbtn();">提交</button>
</body>
<script>
function loginbtn(){
console.log("开始请求。。。");
let params = {'id':"123"};
//将此处的param换成formdata的格式即可
let formdata = new FormData();
formdata.append("name","admin");
fetch("http://localhost/myshop/myshop/data/test1.php",{
method:"POST",
mode:'no-cors',
headers:{},
body:formdata
}).then(function(response){
console.log(response);
})
}
</script>
</html>
原因
fetch在post下不支持直接传递参数,如果你说jQuery为什么可以呢?因为jQuery将传递的数据提前使用formdata做了处理。
福利
为了方便响应小伙伴对后台代码的渴求,顺便贴下后台的代码吧
<?php
header("Access-Control-Allow-Origin:*");
if(isset($_POST["name"])){
echo "请求成功";
print_r($_POST["name"]);
}else{
echo "请求失败";
}
好了,故事讲完了,都回家吃饭吧。。。