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

来源:互联网 发布:艺术品交易 源码 编辑:程序博客网 时间:2024/06/09 16:35

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);    })
原创粉丝点击