欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

记录一次 后台给前端一个接口 前端用来传表单数据给后台

程序员文章站 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;// 阻止表单跳转。如果需要表单跳转,去掉这段即可。
				  });
				});

好了拼接正确的话就会传到后台。记得先把后台运行起来

相关标签: 接口

上一篇: 接头

下一篇: 25、接口