前端给后端传数据的几种方式

1.发送get请求将参数通过？拼接在url后面2.将参数拼接在url中，后台通过占位符接收参数 /{id}3.通过post提交方式将form表单中的数据序列化后传递到后台。4.通过post提交方式将form表单的类型是 json5. 前台将普通数据转换为json

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

}