fetch传值实例代码(后端PHP)

使用FormData前后端数据交互实战

最新推荐文章于 2021-07-15 21:59:20 发布

原创最新推荐文章于 2021-07-15 21:59:20 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

php 同时被 3 个专栏收录

100 篇文章

订阅专栏

实战

32 篇文章

订阅专栏

前端

30 篇文章

订阅专栏

本文通过实例代码讲解了如何使用FormData在前端传递自由格式数据到后端，后端利用PHP进行解析。同时，也介绍了前端如何解析从后端接收到的数据。

FormData传递自由格式数据给后端

首先是js代码：

let formData=new FormData();
let headres = {
            method: 'post',
            credentials: 'include',
            headers: {},
            body: formData
        }
        fetch("你后端的地址",headres)
            .then((response)=>{
                return response.json();
            })
            .then((responseData)=>{
                // 这里接下来再讲解
            })
            .catch((error)=>{
                console.error("测试时出现错误");
                console.log(error)
            })

接着问题就是如何在FormData中灵活插入数据，并能传递给后端解析。最好的办法其实就是将要传的值转换成字符串：

let returnData={
    type1:"直接这样的json格式",
    type2:[
        1,
        2,
        {type3:"这样自由的形式也是可以的"}
    ]
}
// 简单来说就是json支持的形式都是可以的
// 下面将结果保存进FormData中
formData.append('data',JSON.stringify(returnData));

后端解析代码

这里展示后端解析，后端采用的是PHP。但是思路应该是一致的：

// 后端处理是借助两个函数
// htmlspecialchars_decode 去除掉多余的引号以及字符转译
// json_decode 解析json
$post_data=json_decode(htmlspecialchars_decode($_POST['data']),true);

经过上面两个函数处理后，上面formData中的json会被解析成数组，其中的数组依旧是数组。

前端解析自己传递值

最后再来一个要将前端传过来的值再传回给前端解析时，是需要后端做一下处理的：

// 需要后端再将值转换成json交给前端解析
$returnData=json_encode($post_data);
// 再将值传递回前端
echo json_encode(array('returnData'=>$returnData));

之后前端来解析的话，基本就是一般的fetch套路

fetch('获取上面的返回数据的路由')
    .then((response)=>{
        return response.json();
    })
    .then((responseData)=>{
        // 这里可以打印一下数据
        console.log(responseData.returnData);
    })
    .catch((error)=>{
        console.error("解析后端返回数据时出错");
        console.log(error);
    })