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

本文通过实例代码讲解了如何使用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);
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值