前后端数据交换交互

简介

前后端数据交互。

总结前后数据交换的方式。

不管前后分离项目还是不分离都是需要前后数据交互,所以掌握多种前后数据交换方式以面对不同的业务需求。

建议由浅至深,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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!