SpringMVC--06RESTFul风格API-优快云博客

本文链接：https://blog.youkuaiyun.com/bugnotfound/article/details/145809059
RESTFul风格

这里通过一个例子来展示
请求数据用GET
新增数据用POST
修改数据用PUT
删除数据用DELETE
URL不用key=value
<body>
<form>
    用户id：<input type="text" id="id" placeholder="在查询单个用户或修改或删除用户时使用">
    用户名：<input type="text" id="username" placeholder="在修改用户时使用">
    余额： <input type="text" id="capital" placeholder="在修改用户时使用">
    <br>
    <input type="button" id="searchAll" value="查询所有用户">
    <input type="button" id="search" value="查询单个用户">
    <input type="button" id="update" value="修改用户">
    <input type="button" id="add" value="新增用户">
    <input type="button" id="delete" value="删除单个用户">
</form>


<div id="data"></div>

<script>
    var response;
    var container = document.getElementById('data');
    document.getElementById("searchAll").addEventListener('click', function (event) {
        var xhr = new XMLHttpRequest();
        xhr.open("Get", "/user");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                response = JSON.parse(xhr.responseText);
                container.textContent=JSON.stringify(response);
            }
        };
        xhr.send();
    }, false);

    document.getElementById("search").addEventListener('click', function (event) {
        var id = document.getElementById("id").value;
        var xhr = new XMLHttpRequest();
        xhr.open("Get", "/user/" + id);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                response = JSON.parse(xhr.responseText);
                container.textContent=JSON.stringify(response);
            }
        };
        xhr.send();
    }, false)

    document.getElementById("update").addEventListener('click', function (event) {
        var id = document.getElementById("id").value;
        var username = document.getElementById("username").value;
        var capital = document.getElementById("capital").value;
        var xhr = new XMLHttpRequest();
        var data = JSON.stringify({
            id: id,
            username: username,
            capital: capital
        })
        xhr.open("put", "/user");
        // 对于请求参数为json的如果不设置请求头会出现415错误
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                response = JSON.parse(xhr.responseText);
                container.textContent=JSON.stringify(response);
            }
        };
        xhr.send(data);
    }, false)

    document.getElementById("add").addEventListener('click', function (event) {
        var id = document.getElementById("id").value;
        var username = document.getElementById("username").value;
        var capital = document.getElementById("capital").value;
        var xhr = new XMLHttpRequest();
        var data = JSON.stringify({
            id: id,
            username: username,
            capital: capital
        })
        xhr.open("post", "/user");
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.onreadystatechange = function () {
            var xhr = new XMLHttpRequest();
            if (xhr.readyState == 4 && xhr.status == 200) {
                response = JSON.parse(xhr.responseText);
                container.textContent=JSON.stringify(response);
            }
        };
        xhr.send(data);
    }, false)

    document.getElementById("delete").addEventListener('click', function (event) {
        var id = document.getElementById("id").value;
        var xhr = new XMLHttpRequest();
        xhr.open("delete", "/user/" + id);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                response = JSON.parse(xhr.responseText);
                container.textContent=JSON.stringify(response);
            }
        };
        xhr.send();
    }, false)

</script>
</body>