fetch与formdata的故事

最新推荐文章于 2023-09-01 17:15:58 发布

图解前端

最新推荐文章于 2023-09-01 17:15:58 发布

阅读量6k

点赞数 1

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/webofrxy/article/details/78638044

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 1 订阅

订阅专栏

前传

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

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

图解前端

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
fetch与formdata的故事

前传很久以前有个前端想学习fetch的用法，于是他用php写了一个接受post请求的接口，然后前台写了一个使用fetch请求PHP接口的demo，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>login</title></head><body>
复制链接

扫一扫