Restful风格初体验-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46683845/article/details/124890163

本文详细介绍了如何在Spring Boot应用中创建RESTful控制器，通过GET、POST、PUT、DELETE方法处理AJAX请求，并展示了JSON数据的序列化与反序列化。前端使用jQuery和AJAX实现不同HTTP方法的调用，适合初学者理解前后端交互原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制台

package com.xs.controller;

import com.xs.pojo.School;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

/**
 * @Author Administrator
 * @Date 2022/5/20 10:29
 */
//@Controller
//@RestController  == @Controller+@ResponseBody
@RestController
@RequestMapping("restful")
public class RestFulController {
    /**
     * 通过get方法
     * @param school
     * @param name
     * @return
     */
//    @RequestMapping(value = "re",method = RequestMethod.GET)
    @GetMapping("get1")
//    @ResponseBody  直接响应数据，原样输出
//    直接响应字符串的话默认的content-type是text/html，所以可以对其添加样式
    public String getRe(String school,String name){
        System.out.println(school+"================>"+name);
//        return "<h1>get-success</h1>";
//        如果要想直接向前端传输json，必须严格按照json的格式来，将双引号用转义字符转义
        return "{\"msg\":\"GET成功\"}";
    }

    @RequestMapping(value = "re",method = RequestMethod.POST)
//    @ResponseBody  直接响应数据，原样输出
    public String postRe(School school){
        System.out.println(school.getSchool()+"================>"+school.getName());
        return "post-success";
    }

    /**
     * 如果前端传过来的是json数据，这里需要用@RequestBody来对传过来的数据进行反序列化
     * 所以这里需要引入Jackson序列化工具
     * @param school
     * @return
     */
    @RequestMapping(value = "re",method = RequestMethod.PUT)
//    @ResponseBody  直接响应数据，原样输出
    public String putRe(@RequestBody School school){
        System.out.println(school.getSchool()+"================>"+school.getName());
        return "put-success";
    }

    @RequestMapping(value = "re",method = RequestMethod.DELETE)
//    @ResponseBody  直接响应数据，原样输出
    public String deleteRe(School school){
        System.out.println(school.getSchool()+"================>"+school.getName());
        return "delete-success";
    }
}

前端页面
使用ajax传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#get-button").click(function () {
                $.ajax({
                    url: "restful/get1",
                    type: "GET",
                    data: {"school": "达摩克里斯", "name": "霍宣山"},
                    datatype: "json",
                    success: function (res) {
                        console.log(res);
                        console.log(res.msg);
                        $("#get-p").append("学校" + res.msg);
                    }
                })
            });
            $("#pose-button").click(function () {
                $.ajax({
                    url: "restful/re",
                    type: "Post",
                    data: {"school":"达摩克里斯","name":"卫三"},
                    datatype: "json",
                    success:function (data){
                        console.log(data);
                    }
                })
            });
            $("#put-button").click(function () {
                $.ajax({
                    url:"restful/re",
                    type:"Put",
                    // datatype:"json",
                    contentType:"application/json;charset=utf-8",
                    // data:{"school":"帝国军校","name":"应星决"},
                    data:JSON.stringify({"school":"帝国军校","name":"应星决"}),
                    success:function (data) {
                        console.log(data)
                    }
                })
            });
            $("#delete-button").click(function () {
                $.ajax({
                    url:"restful/re",
                    type:"Delete",
                    data:{"school":"塞缪尔","name":"萧.伊莱"},
                    datatype:"json",
                    success:function (data) {
                        console.log(data)
                    }
                })
            });
        })
    </script>
</head>
<body>

<input type="button" id="get-button" value="get方法提交">
<input type="button" id="pose-button" value="pose方法提交">
<input type="button" id="put-button" value="put方法提交">
<input type="button" id="delete-button" value="delete方法提交">
<p id="get-p"></p>
</body>
</html>