Content Table
2016-10-15

使用 REST

Spring MVC 提供了 REST 风格的注解支持，使用 GetMapping, PostMapping, PutMapping, DeleteMapping。JS 的 AJAX 原生支持 GET, PUT, POST, DELETE 请求，但是 Form 表单只支持 POST，不支持 PUT 和 DELETE，为了让 Form 表单也能够使用 REST 的风格进行提交，需要给表单额外提供一个参数 _method:

  • _method 为 put 表示 PUT 请求
  • _method 为 delete 表示 DELETE 请求

服务器端还需要一个 Filter 把 Form 表单的 REST 请求转换为 Spring MVC 识别的 REST 请求。

在 web.xml 里加上 HiddenHttpMethodFilter

1
2
3
4
5
6
7
8
9
<!-- 浏览器的 form 不支持 put, delete 等 method, 由该 filter 将 /blog?_method=delete 转换为标准的 http delete 方法 -->
<filter>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <servlet-name>springmvc</servlet-name>
</filter-mapping>

RestController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package com.xtuer.controller;

import com.xtuer.bean.Result;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@Controller
public class RestController {
    @GetMapping("/rest-form")
    public String restForm() {
        return "rest-form.html";
    }

    @GetMapping("/rest/{id}")
    @ResponseBody
    public Result handleGet(@PathVariable int id, @RequestParam String name, ModelMap map) {
        map.addAttribute("id", id);
        map.addAttribute("name", name);
        return new Result(true, "GET handled", map);
    }

    // 查询
    @GetMapping("/rest")
    @ResponseBody
    public Result handleGet(@RequestParam String name) {
        return new Result(true, "GET handled", name);
    }

    // 更新
    @PutMapping("/rest")
    @ResponseBody
    public Result handlePut() {
        return new Result(true, "UPDATE handled");
    }

    // 创建
    @PostMapping("/rest")
    @ResponseBody
    public Result handlePost() {
        return new Result(true, "CREATE handled");
    }

    // 删除
    @DeleteMapping("/rest")
    @ResponseBody
    public Result handleDelete() {
        return new Result(true, "DELETE handled");
    }
}

新建一个网页 rest-form.html

页面里有 4 个按钮，分别为 GET, PUT, POST, DELETE
  • GET 按钮发送 GET 请求
  • PUT 按钮发送 PUT 请求
  • POST 按钮发送 POST 请求
  • DELETE 按钮发送 DELETE 请求

Form 表单默认支持 GET 和 POST 请求，但不支持 PUT 和 DELETE 请求。为了发送 PUT, DELETE请求，在 form 里添加一个隐藏域 _method 表明发送 PUT, DELETE 请求，使用 POST 提交。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
        body { padding: 25px 50px; }
        button { width: 100px; }
    </style>
</head>
<body>
    <!-- 测试 form 的不同 method，default HTML form 不支持 put and delete -->

    <form action="/rest" method="get">
        <input type="hidden" name="name"/>
        <button type="submit">Get</button>
    </form>

    <form action="/rest" method="post">
        <button type="submit">Post</button>
    </form>

    <form action="/rest" method="post">
        <input type="hidden" name="_method" value="put"/>
        <button type="submit">Put</button>
    </form>

    <form action="/rest" method="post">
        <input type="hidden" name="_method" value="delete"/>
        <button type="submit">Delete</button>
    </form>
</body>
</html>

测试

访问 http://localhost:8080/rest-form 查看输出

使用 AJAX 发送 REST 请求

Form 表单不支持提交 PUT，DELETE 请求，所以我们通过隐藏域的方式间接的达到了目的。但是 AJAX 原生的就支持 GET, PUT, POST, DELETE 请求。

请参考 jQuery 的 REST 插件