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

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

• 1.发送get请求将参数通过？拼接在url后面
• 2.将参数拼接在url中，后台通过占位符接收参数 /{id}
• 3.通过post提交方式将form表单中的数据序列化后传递到后台。
• 4.通过post提交方式将form表单的类型是 json
• 5. 前台将普通数据转换为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();
  }
  

  
  （图片来源网络，侵删）
  
  （图片来源网络，侵删）