Spring MVC配合jQuery Ajax请求接口时异常重定向到JSON返回页问题求助

问题原因 #

• script标签同时设置src属性和内部代码，浏览器会优先加载src指向的资源，直接忽略标签内的自定义JS逻辑，导致表单提交事件的绑定代码完全没有执行，表单触发默认同步提交行为，因此出现页面跳转。
• submit是<form>标签的原生事件，你错误给提交按钮绑定了submit事件，即便JS正常执行也无法触发回调逻辑。
• 你使用的jQuery 1.3版本过老，存在语法兼容性隐患。

修复方案 #

前端代码修改 #

拆分script标签，修正事件绑定对象：

<body>
<!-- 单独引入jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- 独立编写自定义JS逻辑 -->
<script type="text/javascript">
    $(document).ready(function () {
        // 给form标签绑定submit事件
        $("form").submit(function (e) {
            e.preventDefault();
            const url = $(this).attr('action');
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                data: {filmName: $("#filmName").val()},
                success: function (data) {
                    // 自行实现display逻辑，示例：直接把JSON展示到结果节点
                    $("#result").text(JSON.stringify(data));
                }
            });
        });
    });
</script>
<form action="/sessions/search">
    <input id="filmName" name="filmName" type="text" placeholder="Search...">
    <input type="submit" id="submitRequest">
</form>
<div>
    <p id="result"></p>
</div>
</body>

后端代码可选优化 #

无需手动拼接JSON，直接返回业务对象由Spring MVC自动序列化，同时将@ModelAttribute替换为更匹配请求场景的@RequestParam：

@GetMapping(value = "/search", consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public List<Session> searching(@RequestParam("filmName") String request) {
    return sessionService.searchByRequest(request);
}

内容的提问来源于stack exchange，提问作者Влад Савостиков