Springboot 项目中前端页面方法调用

在 Springboot 项目中，前端页面可以通过 AJAX 或者直接调用后端接口的方式来调用后端的方法。

1. AJAX 调用方法

在前端页面中使用 JavaScript 代码，通过 AJAX 技术发起 HTTP 请求，调用后端的方法。以下是一个简单的示例：

$.ajax({
    url: "/hello",
    type: "GET",
    dataType: "text",
    success: function (result) {
        alert(result);
    },
    error: function (xhr, status, error) {
        console.log(xhr.responseText);
    }
});

上面的代码通过 jQuery 的 ajax 方法发起一个 GET 请求，请求后端的 /hello 接口。请求成功后，会弹出一个对话框显示返回的结果。

2. 直接调用后端接口方法

在前端页面中，也可以通过直接调用后端的接口方法来实现方法调用。需要在前端页面引入后端接口的 JavaScript 文件，然后调用其中的方法即可。

以下是一个示例：

<script src="/js/hello.js"></script>
<script>
    function sayHello() {
        var result = hello.sayHello("world");
        alert(result);
    }
</script>
<button onclick="sayHello()">Say Hello</button>

上面的代码引入了一个名为 hello.js 的 JavaScript 文件，在其中定义了一个名为 sayHello 的方法。在前端页面中，通过调用这个方法来实现后端方法的调用。当用户点击 Say Hello 按钮时，会弹出一个对话框显示返回的结果。

需要注意的是，在使用这种方式调用后端方法时，需要将后端接口的方法暴露为 JavaScript 方法，即在后端的 Controller 类中使用 @ResponseBody 注解将返回值转换为 JSON 格式返回给前端。例如：

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String sayHello() {
        return "Hello, world!";
    }
}

在上面的代码中，使用 @RestController 注解标注了一个 Controller 类，并定义了一个名为 sayHello 的方法。当用户访问 /hello 接口时，该方法会被调用，并将返回值转换为 JSON 格式返回给前端。