使用AJAX实现无刷新添加数据至数据库问题求助

嘿，我懂你现在的烦恼——数据能成功插进数据库，但页面还是会自动刷新，明明写了阻止提交的代码却没起作用。咱们一步步排查问题，把这个小bug解决掉～

问题根源拆解 #

你已经尝试用$("#form-insert").submit( function() { return false; });阻止默认提交，但可能因为以下原因失效：

1. jQuery版本过旧：你用的1.8.1版本是很多年前的老版本，事件绑定逻辑和新版本有差异，可能导致阻止默认行为的代码不生效。
2. 事件绑定时机不对：如果JS代码在DOM元素完全加载前就执行了，事件绑定会失败，自然没法阻止页面刷新。
3. 点击事件未阻止默认行为：虽然绑定了submit事件，但按钮的click事件可能先触发，导致表单还是会走默认提交流程。

另外还有个小细节：你的PHP代码开头的echo "Connected successfully";会在每次请求（包括AJAX请求）时输出，这会让AJAX返回的结果里混进多余内容，影响后续提示信息的展示。

修复步骤 #

1. 优化JS代码，确保正确阻止默认行为 #

把你的JS代码改成这样，保证DOM加载完成后再绑定事件，并用更可靠的方式阻止默认提交：

$(document).ready(function() {
    // 绑定表单submit事件
    $("#form-insert").on("submit", function(event) {
        event.preventDefault(); // 关键：明确阻止表单的默认提交动作
        // 发送AJAX请求
        $.post(
            $(this).attr("action"),
            $(this).serializeArray(),
            function(info) {
                $("#result").html(info);
                clearInput(); // 提交成功后清空输入框
            }
        );
    });

    function clearInput() {
        $("#form-insert :input").each(function() {
            $(this).val('');
        });
    }
});

说明：

• 用$(document).ready()包裹代码，确保DOM完全加载后再绑定事件，避免绑定失败。
• 改用on("submit")绑定事件，兼容性更好（尤其适配旧版本jQuery）。
• 用event.preventDefault()替代return false，更明确地阻止默认提交行为，可靠性更高。
• 把AJAX请求放在submit事件里，不管是点击按钮还是按回车提交，都能触发AJAX并阻止刷新。

2. 修复PHP代码的多余输出和安全漏洞 #

你的PHP代码存在严重的SQL注入风险，直接把POST参数拼进SQL语句里非常危险，必须改用预处理语句。同时去掉多余的连接成功提示：

<?php
$DBConInfo = [ 
    'server' => '127.0.0.1', 
    'username' => 'root', 
    'password' => '', 
    'name' => 'test', 
];

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$conn = new mysqli($DBConInfo['server'], $DBConInfo['username'], $DBConInfo['password'], $DBConInfo['name']);

// 仅处理POST提交的插入请求
if(isset($_POST['insert'])) {
    // 获取表单数据
    $name = $_POST['name'];
    $description = $_POST['description'];
    $price = $_POST['price'];
    $picture = $_POST['picture'];

    // 使用预处理语句防止SQL注入
    $query = "INSERT INTO `product`(`name`,`description`, `price`, `picture`) VALUES (?, ?, ?, ?)";
    $stmt = $conn->prepare($query);
    // 绑定参数（s代表字符串，price如果是数字类型可以改成i）
    $stmt->bind_param("ssds", $name, $description, $price, $picture);
    $stmt->execute();

    if($stmt->affected_rows > 0) {
        echo 'Data Inserted';
    } else{
        echo 'Data Not Inserted';
        echo $conn->error;
    }

    $stmt->close();
    $conn->close();
}
?>

说明：

• 去掉了echo "Connected successfully";，避免AJAX返回多余内容干扰提示信息。
• 改用mysqli预处理语句执行插入操作，彻底杜绝SQL注入风险，这是后端开发必须遵守的安全规范哦。

3. 升级jQuery版本（可选但推荐） #

1.8.1版本太老旧，建议升级到较新的稳定版本（比如3.x系列），能避免很多兼容性问题。你可以下载本地的新版本jQuery文件替换旧的jquery-1.8.1.min.js。

测试验证 #

修改完代码后重新提交表单，应该就能实现无刷新插入数据，页面不会再刷新，同时#result区域会显示正确的操作提示。

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