前端向后端传递数据的五种常见方式解析

$.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){}

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){}

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) {}

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) {}

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