如何通过原生JavaScript调用Spring Controller？（非Ajax/JQuery）

看起来你遇到的核心问题是原代码依赖了JQuery（$('#')是JQuery语法），而且没有正确指定要提交的表单元素，导致请求发不出去。另外你的Spring Controller也没接收前端传的data参数，就算请求发出去了也拿不到数据。下面给你两种纯原生JS的解决方案，完全不用Ajax或JQuery：

方案1：直接通过页面跳转触发GET请求（最简单） #

因为你的Controller是GET方法，直接修改window.location.href就能触发请求，这是原生JS最直接的方式：

修改你的JavaScript函数：

function myFunc(id) {
    alert(id);
    // 拼接完整的请求URL，把id作为参数传递
    const baseUrl = '${pageContext.request.contextPath}/viewSpecificBook';
    window.location.href = `${baseUrl}?data=${id}`;
}

同时，你的Spring Controller需要添加参数接收逻辑：

@RequestMapping(value="viewSpecificBook", method = RequestMethod.GET)
public ModelAndView viewSpecificBook(@RequestParam("data") String bookType) {
    // 这里可以使用bookType参数做业务逻辑处理，比如查询对应类型的书籍
    ModelAndView mav = new ModelAndView("你的目标视图名称");
    // 示例：向视图传递数据
    // mav.addObject("bookList", bookService.getBooksByType(bookType));
    return mav;
}

方案2：原生JS创建隐藏表单提交（适合模拟表单提交场景） #

如果你更倾向于用表单提交的方式，也可以用原生JS动态创建表单，无需提前在HTML中编写表单元素：

function myFunc(id) {
    alert(id);
    // 创建form元素
    const form = document.createElement('form');
    // 设置表单提交方式和目标地址
    form.method = 'GET';
    form.action = '${pageContext.request.contextPath}/viewSpecificBook';
    
    // 创建隐藏参数输入框
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'data';
    input.value = id;
    
    // 组装表单并添加到DOM
    form.appendChild(input);
    document.body.appendChild(form);
    // 提交表单
    form.submit();
    // 提交后移除临时表单（可选操作）
    document.body.removeChild(form);
}

同样，Controller需要添加@RequestParam来接收data参数，逻辑和方案1一致。

原代码失效的原因 #

• 你使用了JQuery的$('#')选择器，但这不符合“原生JS”的要求，且该选择器未指定具体表单ID，根本找不到可提交的表单元素，submit()自然无法执行。
• 你的Spring Controller没有声明接收data参数，就算请求成功发送，后端也无法获取你传递的id值。

按照上述方案修改后，点击div就能正确触发Spring Controller的请求了。

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