前端给后端传数据的五种方式总结
作者：.我非贼船
前端与后端数据交互是软件开发中不可或缺的一环,下面这篇文章主要给大家介绍了关于前端给后端传数据的五种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
1.发送get请求将参数通过？拼接在url后面
$.ajax({
url: "/order/userPage?page="+page+"&pageSize="+pageSize, //请求的url地址
cache: "false", //设置为false将不会从浏览器中加载请求信息
async: "true", //true所有请求均为异步请求
dataType: "json", //请求返回数据的格式
type:"get", //请求方式
上面等同于==>>
async initData(){
paging: {
page: 1,
pageSize: 5
}
const res = await orderPagingApi(this.paging)
}
function orderPagingApi(data) {
return $axios({
'url': '/order/userPage',
'method': 'get',
//请求参数
params: {...data}
})
上面等同于==>>
async initData(){
paging: {
page: 1,
pageSize: 5
}
const res = await orderPagingApi(this.paging)
}
function orderPagingApi(data) {
return $axios({
'url': '/order/userPage',
'method': 'get',
'data': data
})
后端接收参数
@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(Integer page,Integer pageSize){}
或
@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(@RequestParam（"page"）Integer page,@RequestParam（"pageSize"）Integer pageSize){}
2.将参数拼接在url中，后台通过占位符接收参数 /{id}
async initData(){
const res = await addressFindOneApi(params.id)
}
function addressFindOneApi(id) {
return $axios({
'url': `/addressBook/${id}`,
'method': 'get',
})
}
后端接收参数
@GetMapping("/addressBook/{id}")
@ResponseBody
public R<AddressBook> backList(@PathVariable("id")Long id){}
3.通过post提交方式将form表单中的数据序列化后传递到后台。
async initData(){
const res =await formAjax();
}
function formAjax() {
$.ajax({
url: "/login",
type: "post",
data: $("#form").serialize(), // 对id为form的表单数据进行序列化并传递到后台后端接收参数
@RequestMapping("/login")
@ResponseBody
//form表单的数据与User实体类的数据相对应
public String login (User user) {}4.通过post提交方式将form表单的类型是 json
async initData(){
const res =await formAjax();
}
function formAjax() {
$.ajax({
url: "/login",
type: "post",
contentType: 'application/json',后端接收参数
@RequestMapping("/login")
@ResponseBody
//form表单的数据与User实体类的数据相对应
public String login ( @RequestBody User user) {}5. 前台将普通数据转换为json
async initData(){
paging: {
page: 1,
pageSize: 5
}
const res = await orderPagingApi(this.paging)
}
function orderPagingApi(data) {
return $axios({
'url': '/order/userPage',
'method': 'post',
data: JSON.stringify(data),
})后台接收参数
@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(@RequesBody Map<Integer,Integer> map){
Integer page = map.get("page");
Integer pageSize = map.get("pageSize");
}
或 ==>>
//假设PageInfo类中有属性与其相对应
@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(@RequesBody PageInfo pageInfo){
Integer page = pageInfo.getPage();
Integer pageSize = pageInfo.getPageSize();
}总结
到此这篇关于前端给后端传数据的五种方式总结的文章就介绍到这了,更多相关前端给后端传数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！