前後端資料交換互動

kukycol發表於2020-08-21
後端

簡介

前後端資料互動。

總結前後資料交換的方式。

不管前後分離專案還是不分離都是需要前後資料互動，所以掌握多種前後資料交換方式以面對不同的業務需求。

建議由淺至深，get(查詢)、post(新增)、put（更新）、delete(刪除)，最後遵循RESTful風格開發。

交換方式

  1. form表單提交方式
  2. json提交方式
  3. get請求提交方式
  4. put更新請求方式
  5. delete刪除請求方式

POST請求

form提交方式

#前端

<form  action="/login" method="POST">
    <div>
        <label >賬號：</label>
            <input type="text" name="uname" >
        </div>
    </div>
    <div >
        <label >密碼：</label>
            <input type="password" name="pwd">
        </div>
    </div>
    <div>
         <button type="submit" >立即提交</button>
        </div>
    </div>
</form>
  #後端

   @PostMapping("/login")
    public String login(AdUser user){
        return "提交成功";
    }

json提交方式

   #前端

   $.ajax({
                url: "/login",    //請求的url地址
                dataType: "json",   //後端返回的資料格式為json
                contentType : 'application/json',
                type: "POST",   //請求方式
                data:JSON.stringify(data.field),//將表單資料json格式化
                success: function (req) { //後端響應成功後的處理
                    console.log(req)
                }

            });
  #後端，@RequestBody註解就是接受json資料的

   @PostMapping("/login")
    public String login(@RequestBody AdUser user){
        return "{\"code\":\"1\",\"msg\":\"提交成功\"}";
    }

GET請求

方式1

#前端

  $.get("/findById",{id:"id"},function(data, textStatus){
             console.log(textStatus)
             console.log(data)
    });
  #後端，@RequestParam註解把引數以http:www.baidu.com?id=1方式帶參給後端

   @GetMapping("/findById")
    public String findById(@RequestParam("id")int id){
        return "{\"code\":\"1\",\"msg\":\"查詢成功\"}";
    }

方式2

#前端

  $.get("/findById/"+id,function(data, textStatus){
             console.log(textStatus)
             console.log(data)
    });
  #後端，@PathVariable註解把引數以http:www.baidu.com/1方式帶參給後端

   @GetMapping("/findById/{id}")
    public String findById(@PathVariable("id")int id){
        return "{\"code\":\"1\",\"msg\":\"查詢成功\"}";
    }
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章