Spring MVC（无JSP）场景下，如何通过JS调用Java方法实现无刷新按钮交互？

你说得没错，要实现点击按钮触发Java方法且不刷新页面，AJAX正是最佳选择。下面一步步帮你完成这个功能：

1. 调整Spring控制器代码 #

首先，你需要把run()方法改成一个能处理HTTP请求的端点，并且返回合适的响应（因为AJAX需要接收后端的反馈）。这里我们用@PostMapping来映射POST请求，同时用@ResponseBody来直接返回响应内容：

@Controller
@RequestMapping("/")
public class MainController {

    // 映射POST请求到/run路径
    @PostMapping("/run")
    @ResponseBody
    public String run() {
        System.out.println("Test1");
        System.out.println("Test2");
        System.out.println("Test3");
        System.out.println("...");
        // 返回一个成功消息给前端AJAX
        return "Method executed successfully!";
    }
}

关键说明： #

• @PostMapping("/run")：指定这个方法处理发送到/run的POST请求，你也可以根据需求用@GetMapping，但POST更适合这类触发操作的场景。
• @ResponseBody：告诉Spring直接把返回的字符串作为HTTP响应体返回，而不是去查找视图模板。

2. 前端AJAX实现（两种常见方式） #

接下来在你的网页中添加按钮，并编写AJAX代码来触发后端方法，这里提供两种常用的实现方式：

方式一：原生JavaScript Fetch API #

<button id="triggerBtn">触发Java方法</button>

<script>
document.getElementById('triggerBtn').addEventListener('click', function() {
    fetch('/run', {
        method: 'POST', // 和控制器的请求方式对应
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
    .then(response => response.text())
    .then(data => {
        // 处理后端返回的响应，比如提示用户
        console.log(data);
        alert(data);
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('请求失败，请稍后重试');
    });
});
</script>

方式二：jQuery AJAX（如果你的项目引入了jQuery） #

<button id="triggerBtn">触发Java方法</button>

<script>
$('#triggerBtn').click(function() {
    $.ajax({
        url: '/run',
        type: 'POST',
        success: function(data) {
            console.log(data);
            alert(data);
        },
        error: function(xhr, status, error) {
            console.error('请求出错:', error);
            alert('请求失败，请稍后重试');
        }
    });
});
</script>

关键说明： #

• 确保按钮的点击事件绑定正确，点击后会异步发送请求到/run端点。
• 成功回调函数可以处理后端返回的消息，比如给用户提示；失败回调可以处理请求出错的情况。
• 整个过程不会触发页面刷新或URL重定向，完全符合你的需求。

内容的提问来源于stack exchange，提问作者MSOUFAN