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

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

• 1.发送get请求将参数通过？拼接在url后面
• 2.将参数拼接在url中，后台通过占位符接收参数 /{id}
• 3.通过post提交方式将form表单中的数据序列化后传递到后台。
• 4.通过post提交方式将form表单的类型是 json
• 5. 前台将普通index.php/tags-301.html" >数据转换为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 userPage(Integer page,Integer pageSize){} 或 @GetMapping("/order/userPage") @ResponseBody public R 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 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 userPage(@RequesBody Map map){       Integer page = map.get("page");              Integer pageSize = map.get("pageSize");    } 或  ==>>//假设PageInfo类中有属性与其相对应@GetMapping("/order/userPage")@ResponseBody public R userPage(@RequesBody PageInfo pageInfo){      Integer page = pageInfo.getPage();      Integer pageSize = pageInfo.getPageSize();}