前端给后端传数据的几种方式_前端向后端传输数据的方法有哪些

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
    })
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

后端接收参数

@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){}
1
2
3
4
5
6
7
8
9
10
11
12
13

2.将参数拼接在url中，后台通过占位符接收参数 /{id}

async initData(){
   
    const res = await addressFindOneApi(params.id)
}
 
​​​​​​​function addressFindOneApi(id) {
  return $axios({
    'url': `/addressBook/${id}`,
    'method': 'get',
  })
}
1
2
3
4
5
6
7
8
9
10
11

后端接收参数

@GetMapping("/addressBook/{id}")
@ResponseBody
 
public R<AddressBook> backList(@PathVariable("id")Long id){}
1
2
3
4

3.通过post提交方式将form表单中的数据序列化后传递到后台。

async initData(){
 
    const res =await formAjax();
 
}
 
function formAjax() {
 
       $.ajax({
 
       url: "/login", 
 
       type: "post", 
 
       data: $("#form").serialize(),  // 对id为form的表单数据进行序列化并传递到后台
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

后端接收参数

@RequestMapping("/login")
 
@ResponseBody
 
//form表单的数据与User实体类的数据相对应
 
public String login (User user) {}
1
2
3
4
5
6
7

4.通过post提交方式将form表单的类型是 json

async initData(){
 
    const res =await formAjax();
 
}
 
function formAjax() {
 
       $.ajax({
 
       url: "/login", 
 
       type: "post", 
       
       contentType: 'application/json',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

后端接收参数

@RequestMapping("/login")
 
@ResponseBody
 
//form表单的数据与User实体类的数据相对应
 
public String login ( @RequestBody User user) {}
1
2
3
4
5
6
7

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),
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

后台接收参数

@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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22