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

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

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")@ResponseBodypublicR<Page>userPage(Integer page,Integer pageSize){}
 
或
 
@GetMapping("/order/userPage")@ResponseBodypublicR<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}")@ResponseBodypublicR<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实体类的数据相对应publicString 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实体类的数据相对应publicString login (@RequestBodyUser 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")@ResponseBodypublicR<Page>userPage(@RequesBodyMap<Integer,Integer> map){Integer page = map.get("page");Integer pageSize = map.get("pageSize");}
 
或  ==>>//假设PageInfo类中有属性与其相对应@GetMapping("/order/userPage")@ResponseBodypublicR<Page>userPage(@RequesBodyPageInfo pageInfo){Integer page = pageInfo.getPage();Integer pageSize = pageInfo.getPageSize();}