fetch与formdata的故事

来源：互联网发布：大数据股票龙头股编辑：程序博客网时间：2024/05/23 14:48

前传

很久以前有个前端想学习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 "请求失败";    }

好了，故事讲完了，都回家吃饭吧。。。

阅读全文

0 0