Ajax POST仅触发一次求助：提交后无法重复提交但表格可刷新

问题分析 #

你的代码存在两个核心问题：

1. 异步请求顺序混乱：提交数据的Ajax和表格刷新的load请求是并行执行的，没有等待数据提交完成就刷新表格，不仅可能导致数据未写入数据库就展示旧内容，还会加剧后续请求的时序错误。
2. 表单数据丢失：控制台提示的“未定义数组键”说明后续提交时表单数据为空，大概率是load操作刷新页面内容时，把表单#form1也替换了（比如表单在表格内部或被contacttest.php返回的内容覆盖），导致点击按钮时获取不到有效表单数据。

正确实现方式 #

1. 确保表单与表格分离

先确认#form1不在#mytable容器内，避免表格刷新时替换表单元素。如果表单必须放在表格里，需要改用事件委托绑定按钮点击事件，避免元素被替换后事件失效。

2. 调整异步请求顺序，等待提交完成后再刷新表格

修改代码，在提交数据的Ajax成功回调中执行表格刷新，保证数据写入数据库后再更新页面展示：

<button id="refresh-btn" type="button">Add New</button>

<script>
$("#refresh-btn").on('click', function(){
    var f = $('#form1');
    // 先验证表单数据是否存在，避免空提交
    if (f.serialize().trim() === '') {
        alert('请填写表单内容');
        return;
    }

    $.ajax({
        type: "POST",
        url: "insert.php",
        data: f.serialize(),
        success: function(response) {
            // 提交成功后再刷新表格
            $("#mytable").load("contacttest.php #mytable", function() {
                // 表格刷新完成后重置表单，方便下次输入
                f[0].reset();
            });
        },
        error: function(xhr, status, error) {
            // 处理提交失败的情况
            console.error('数据提交失败:', error);
            alert('提交失败，请重试');
        }
    });
});
</script>

3. 修复后端的错误处理

在insert.php中添加数组键存在性检查，避免出现“未定义数组键”的错误，示例如下：

// 获取表单字段前先检查是否存在，避免报错
$name = isset($_POST['name']) ? $_POST['name'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';

// 验证数据完整性后再执行插入逻辑
if (!empty($name) && !empty($email)) {
    // 执行数据库插入操作
} else {
    echo '表单数据不完整';
}

4. 动态元素的事件绑定（可选）

如果按钮或表单会被动态替换（比如表格刷新时包含按钮），需要改用事件委托绑定点击事件，确保元素被替换后事件依然有效：

$(document).on('click', '#refresh-btn', function(){
    // 原逻辑代码
});

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