携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

今天我们来学习一下RESTful的四种请求方式GET,POST,PUT,DELETE，通过前端demo来模拟请求

1.项目概览

2.webapp目录下新建html静态文件和引入jquery-3.3.1.min.js文件

3.GET请求

<script>
    $(function () {
    //get请求
        $("#btnGet").click(function () {
            $.ajax({
                url:"/restfull/request",
                type:"get",
                dataType:"json",
                success:function (res) {
                    $("#btnGetText").text(res.message)
                }
            })
        })  
    })
    </script>

<body>
<input type="button" id="btnGet" value="发送get请求">
<h1 id="btnGetText"></h1>
<body>

4.重启应用

点击按钮
这时候我们发现请求回来的数据乱码
F12我们看一下网络请求解决方案：
在resources/applicationContext.xml新增一条配置

<value>application/json;charset=utf-8</value>

重启应用，这时候正常了

5.POST请求

//2.新增数据
@PostMapping("request")
@ResponseBody
public String doPost(){
    return  "{"message":"新增数据"}";
}

<input type="button" id="btnPost" value="发送post请求">
<h1 id="btnPostText"></h1>

6.PUT请求

//3.更新数据
@PutMapping("request")
@ResponseBody
public String doPut(){
    return  "{"message":"更新数据"}";
}

<input type="button" id="btnPut" value="发送更新请求">
<h1 id="btnPutText"></h1>

7.DELETE请求

//4.删除数据
@DeleteMapping("request")
@ResponseBody
public String doDelete(){
    return  "{"message":"删除数据"}";
}

<input type="button" id="btnDelete" value="发送删除请求">
<h1 id="btnDeleteText"></h1>

8.@RestController的用法

我们发现，每一次写接口的时候，都要定义@ResponseBody返回，很麻烦，这时候我们可以通过@RestController注解来简化我们的开发流程

9.@PathVariable获取地址栏参数

//2.获取地址栏参数
@GetMapping("/test/{id}")
//@ResponseBody
public String doGet(@PathVariable("id") Integer id){
    return  "{"message":"新增数据","id":""+id+""}";
}

代码说明：
@PathVariable("id") Integer id 表示将参数id赋值给变量 Interger Id

$(function () {
    $("#btnGetParam").click(function () {
        $.ajax({
            url:"/restfull/test/100",
            type:"get",
            dataType:"json",
            success:function (res) {
                $("#btnGetParamText").text(res.message+res.id)
            }
        })
    })
})

掘金日新计划 · 8 月更文挑战第26天--RESTful四种基本请求方式