无法从JSP表单发起Ajax Servlet调用，加载动画不生效排查

嘿，我帮你揪出了几个导致Ajax失效的关键问题，都是前端和后端交互里很常见的小坑，咱们一个个来解决：

1. 表单默认提交行为是罪魁祸首 #

你的提交按钮是<input type="submit">，点击它会直接触发表单的默认提交动作——页面瞬间刷新，Ajax请求还没来得及执行就被中断了，这是最核心的问题。

解决办法：

• 给表单的onsubmit事件绑定函数，并在函数里调用event.preventDefault()阻止默认行为；
• 或者把按钮类型改成type="button"，彻底避免触发表单提交（不过绑定submit事件更符合表单交互的规范）。

2. jQuery脚本标签闭合错误 #

你写的<script type="text/javascript" src="jquery1.10.2.js" />是自闭合标签，这种写法在很多浏览器里会导致jQuery加载失败，必须改成标准的闭合形式：

<script type="text/javascript" src="jquery1.10.2.js"></script>

3. 加载动画的显示方法写错了 #

document.getElementById('loader').show()是错误的——show()是jQuery的方法，原生DOM元素根本没有这个方法。你可以二选一：

• 用jQuery选择器调用show()：$('#loader').show();
• 用原生JS修改样式：document.getElementById('loader').style.display = 'block';

4. Servlet转发的逻辑需要调整 #

你的Servlet休眠后转发到second.jsp，但这是Ajax请求，转发的页面内容会作为响应返回给Ajax的success回调，而不是直接跳转到second.jsp。如果你的需求是加载完成后跳转到新页面，得在success回调里手动做跳转；如果是要把second.jsp的内容展示在当前页面，就把返回的data插入到页面容器里。

修改后的完整代码 #

index.jsp（核心修复版） #

<html>
<head>
    <title>first</title>
    <link href="mycss.css" rel="stylesheet">
    <!-- 修复script标签闭合 -->
    <script type="text/javascript" src="jquery1.10.2.js"></script>
    <script type="text/javascript">
        function callAjax(event) {
            // 阻止表单默认提交行为，这一步必须有！
            event.preventDefault();
            
            $.ajax({
                type: 'POST',
                url: '/toSecond',
                // 带上文本框的输入数据
                data: { name: $('#name').val() },
                beforeSend:function(){
                    // 正确显示加载动画
                    $('#loader').show();
                },
                success:function(data){
                    alert('请求完成！');
                    // 这里添加跳转逻辑，跳转到second.jsp
                    window.location.href = 'second.jsp';
                },
                error:function(){
                    alert('请求失败，请稍后重试~');
                    $('#loader').hide();
                },
                complete:function(){
                    // 不管成功失败，最后都隐藏加载动画
                    $('#loader').hide();
                }
            });
        }
    </script>
</head>
<body>
    <!-- 给表单绑定submit事件，传递event参数 -->
    <form onsubmit="callAjax(event);">
        Name: <input type="text" id="name" name="name"/>
        <input type="submit" id="submitBtn" value="submit"/>
    </form>
    <div class="modal" id="loader"></div>
</body>
</html>

可选优化：用jQuery绑定事件（更优雅） #

如果不想用inline的onsubmit，可以换成jQuery的事件绑定，代码更清晰易维护：

// 页面加载完成后绑定事件
$(function(){
    $('#submitBtn').click(function(event){
        // 阻止默认提交
        event.preventDefault();
        
        // 执行Ajax请求
        $.ajax({
            type: 'POST',
            url: '/toSecond',
            data: { name: $('#name').val() },
            beforeSend:function(){
                $('#loader').show();
            },
            success:function(data){
                alert('请求完成！');
                window.location.href = 'second.jsp';
            },
            error:function(){
                alert('请求失败，请稍后重试~');
                $('#loader').hide();
            },
            complete:function(){
                $('#loader').hide();
            }
        });
    });
});

Servlet的可选优化（返回跳转信号） #

如果希望后端控制跳转逻辑，可以让Servlet返回JSON格式的指令，而不是直接转发：

public class TempServlet extends HttpServlet {
    public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        String name = req.getParameter("name");
        try{
            Thread.sleep(3000);
        } catch(Exception e){
            e.printStackTrace();
        }
        // 设置响应为JSON类型
        res.setContentType("application/json");
        // 返回跳转地址
        res.getWriter().write("{\"redirectUrl\":\"second.jsp\"}");
    }
}

然后在Ajax的success回调里解析并跳转：

success:function(data){
    var result = JSON.parse(data);
    window.location.href = result.redirectUrl;
}

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