快捷導(dǎo)航

前端給后端傳數(shù)據(jù)的五種方式總結(jié)

更新時間：2024年07月15日 09:46:31 作者：.我非賊船

前端與后端數(shù)據(jù)交互是軟件開發(fā)中不可或缺的一環(huán),下面這篇文章主要給大家介紹了關(guān)于前端給后端傳數(shù)據(jù)的五種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.發(fā)送get請求將參數(shù)通過？拼接在url后面
2.將參數(shù)拼接在url中，后臺通過占位符接收參數(shù) /{id}
3.通過post提交方式將form表單中的數(shù)據(jù)序列化后傳遞到后臺。
4.通過post提交方式將form表單的類型是 json
5. 前臺將普通數(shù)據(jù)轉(zhuǎn)換為json
總結(jié)

1.發(fā)送get請求將參數(shù)通過？拼接在url后面

$.ajax({
        url: "/order/userPage?page="+page+"&pageSize="+pageSize,    //請求的url地址  
        cache: "false",   //設(shè)置為false將不會從瀏覽器中加載請求信息
        async: "true",    //true所有請求均為異步請求
        dataType: "json", //請求返回數(shù)據(jù)的格式
        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',
        //請求參數(shù)
        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
    })

后端接收參數(shù)

@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.將參數(shù)拼接在url中，后臺通過占位符接收參數(shù) /{id}

async initData(){
    const res = await addressFindOneApi(params.id)
}
 
???????function addressFindOneApi(id) {
  return $axios({
    'url': `/addressBook/${id}`,
    'method': 'get',
  })
}

后端接收參數(shù)

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

3.通過post提交方式將form表單中的數(shù)據(jù)序列化后傳遞到后臺。

async initData(){
    const res =await formAjax();
}
function formAjax() {
       $.ajax({
       url: "/login", 
       type: "post", 
       data: $("#form").serialize(),  // 對id為form的表單數(shù)據(jù)進行序列化并傳遞到后臺

后端接收參數(shù)

@RequestMapping("/login")
@ResponseBody
//form表單的數(shù)據(jù)與User實體類的數(shù)據(jù)相對應(yīng)
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',

后端接收參數(shù)

@RequestMapping("/login")
@ResponseBody
//form表單的數(shù)據(jù)與User實體類的數(shù)據(jù)相對應(yīng)
public String login ( @RequestBody User user) {}

5. 前臺將普通數(shù)據(jù)轉(zhuǎn)換為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),
    })

后臺接收參數(shù)

@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(@RequesBody Map<Integer,Integer> map){
      Integer page = map.get("page");
      Integer pageSize = map.get("pageSize");   
}
或  ==>>
//假設(shè)PageInfo類中有屬性與其相對應(yīng)
@GetMapping("/order/userPage")
@ResponseBody
public R<Page> userPage(@RequesBody PageInfo pageInfo){
     Integer page = pageInfo.getPage();
     Integer pageSize = pageInfo.getPageSize();
}