AJAX提交表单时页面异常跳转问题排查（附HTML代码）

你遇到的跳转问题，核心原因是浏览器默认会执行表单的提交动作——即使你写了AJAX代码，点击提交按钮时，浏览器会同时触发AJAX请求和表单的默认跳转（跳转到action属性指定的userInfo.php），所以最终页面会跳走，AJAX的后续操作（清空表单、提示成功）也没法执行。

1. 阻止表单的默认提交行为 #

你需要在表单的submit事件处理函数中，添加event.preventDefault()来禁用浏览器的默认跳转行为。这里给你两种常用的实现方式：

写法一：绑定表单的submit事件（推荐）

<html>
<head>
    <title>Insert Data Into MySQL: jQuery + AJAX + PHP</title>
    <!-- 先引入jQuery，这是AJAX代码运行的前提 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm" action="userInfo.php" method="post">
        <!-- 示例表单输入项，根据你的实际需求修改 -->
        <input type="text" name="username" placeholder="用户名" required>
        <input type="email" name="email" placeholder="邮箱" required>
        <button type="submit">保存</button>
    </form>
    <!-- 成功提示容器，默认隐藏 -->
    <div id="successTip" style="display:none; color:#2ecc71; margin-top:10px;">数据保存成功！</div>

    <script>
        $(document).ready(function() {
            $('#myForm').on('submit', function(event) {
                // 关键：阻止浏览器的默认表单提交行为
                event.preventDefault();

                // 快速序列化表单数据（自动收集带name属性的输入项）
                var formData = $(this).serialize();

                // 发送AJAX请求
                $.ajax({
                    url: $(this).attr('action'), // 复用表单的action地址
                    type: $(this).attr('method'), // 复用表单的请求方式
                    data: formData,
                    success: function(res) {
                        // 请求成功后执行：清空表单、显示提示
                        $('#myForm')[0].reset();
                        $('#successTip').show();
                        // 可选：3秒后自动隐藏提示
                        setTimeout(() => $('#successTip').hide(), 3000);
                    },
                    error: function(xhr, status, err) {
                        // 处理请求失败的情况
                        alert('数据保存失败：' + err);
                    }
                });
            });
        });
    </script>
</body>
</html>

写法二：绑定按钮的click事件

如果你的按钮是type="button"，可以直接绑定click事件，但如果是type="submit"，依然需要阻止默认行为：

$('button[type="submit"]').on('click', function(event) {
    event.preventDefault();
    // 后续AJAX逻辑和上面示例一致
});

2. 确保PHP端（userInfo.php）正确处理请求 #

你的userInfo.php需要接收AJAX传递的数据，完成数据库插入后返回响应标识，示例代码如下：

<?php
// 连接数据库（请替换成你的实际数据库配置）
$dbConn = mysqli_connect('localhost', 'your_db_user', 'your_db_pwd', 'your_db_name');
if (!$dbConn) {
    die('数据库连接失败：' . mysqli_connect_error());
}

// 安全过滤表单数据，防止SQL注入
$username = mysqli_real_escape_string($dbConn, $_POST['username']);
$email = mysqli_real_escape_string($dbConn, $_POST['email']);

// 执行插入操作
$insertSql = "INSERT INTO users (username, email) VALUES ('$username', '$email')";
if (mysqli_query($dbConn, $insertSql)) {
    echo 'success'; // 返回成功标识给前端
} else {
    echo 'error: ' . mysqli_error($dbConn); // 返回错误信息
}

// 关闭数据库连接
mysqli_close($dbConn);
?>

3. 额外检查项 #

• 确认已正确引入jQuery库，否则AJAX代码会失效；
• 打开浏览器控制台（F12）查看是否有JS报错，比如请求404、变量未定义等；
• 表单输入项必须带有name属性，否则serialize()无法收集对应数据。

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