06-SpringBoot整合Jquery

作者：System 时间：2024年08月17日分类：所有,ajax 字数：1226

Spring Boot整合Jquery主要涉及到前后端的交互，以下是一个简单的例子：

在Spring Boot项目的static目录下添加jquery库。
在HTML页面中引入jquery库。




<!DOCTYPE html>
<html>
<head>
    <title>Spring Boot 整合 jQuery</title>
    <!-- 引入jQuery库 -->
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <button id="sendRequest">发送请求</button>
    </div>
 
    <div id="result"></div>
 
    <script>
        $(document).ready(function(){
            $("#sendRequest").click(function(){
                $.ajax({
                    url: "/greeting",
                    type: "GET",
                    success: function(result) {
                        $("#result").html("来自后端的问候: " + result);
                    }
                });
            });
        });
    </script>
</body>
</html>

创建一个Controller返回数据。




import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class GreetingController {
 
    @GetMapping("/greeting")
    public String greeting() {
        return "Hello, Spring Boot!";
    }
}

确保你的Spring Boot项目已经配置了Web模块，并且能够正确地处理静态资源。

以上代码实现了一个简单的前后端交互，通过点击按钮发送一个Ajax请求到后端，后端返回数据后更新页面的指定部分。

06-SpringBoot整合Jquery

评论已关闭

推荐阅读