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);
})