记录一次 后台给前端一个接口 前端用来传表单数据给后台
程序员文章站
2022-03-04 13:33:45
...
前端通过接口往后台传数据
1、接口样式
/attraction/uploding 接口地址
//接口数据格式
var data4={
userid:"jingdian000001",
address: "******",
latlng:{
lat:28.806712,
lng:109.123456
},
name:"凤凰古城",
photoUri:[
"1.jpg",
"2.jpg"
],
videoUri:[
"1.mp4",
"2.mp4"
],
textDescription:"凤凰古城溜了一大圈,感觉超赞,特别是沿河景色",
type:"类型"
};
拿到这个接口 首先要将前端获取的数据拼接成一个一模一样的数据格式
3、后台格式 “attr”为后台接收的数据
@PostMapping(value = "/uploding")
public Result uploding(@RequestParam("attr") String attr) throws Exception{
return Result.success(attractionService.uploding(attr));
}
2、前端拼接(layui表单)
form.on('submit(demo1)', function(data){
var url = 'http://127.0.0.1/attraction/uploding';//接口地址 还需要上本机地址。
var param = data.field;//获取数据
param.photoUri = param.photoUrl.split(",");//在photoUri后加,
param.videoUri = param.videoUrl.split(",");
var latlngArr = param.latlng.split(",");
param.latlng = {lat: latlngArr[0], lng: latlngArr[1]};
//将拼接成功的param用成JSON格式传给后台,打印返回结果
$.post(url, {"attr": JSON.stringify(param)}, function(e){
// console.log(e);
});
// layer.alert(JSON.stringify(param), {
// title: '最终的提交信息'
// })
return false;// 阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});
好了拼接正确的话就会传到后台。记得先把后台运行起来