前后端数据交换交互

简介

前后端数据交互。

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

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

建议由浅至深，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 协议》，转载必须注明作者和本文链接