无刷新提交表单仅首次插入数据库成功问题排查修复

二次提交失效是3个核心问题叠加导致的：

• 按钮行内onclick绑定了myFunctions()、reflash()两个未定义的函数，点击时会抛出JS引用错误，首次执行可能因事件触发顺序侥幸跑通，后续JS报错会阻断AJAX提交逻辑。
• 清空输入框的方法使用错误：<input>是表单控件，输入内容存储在value属性上，需要用jQuery的.val('')方法清空，现有代码用的.text('')只能修改普通元素的内部文本，完全无法清空输入框内容，会导致序列化数据异常。
• GET请求默认被浏览器缓存：如果两次提交的参数一致，浏览器会直接读取本地缓存的首次提交响应，不会真实发送请求到后端，自然不会写入数据库。

1. 修改表单HTML代码 #

删掉按钮上无意义的行内onclick事件，补全缺失的标签尖括号，修复后代码：

<form method='GET' action="insert.php" id='myform' >
    <input type="text" name="Description" id="Description">
    <input type="text" name="Unitys" id="Unitys">
    <input type="text" name="quantitys" id="quantitys">
    <input type="text" name="Text1s" id="Text1s">
    <input type="text" name="PurchaseQty" id="PurchaseQty">
    <input type="text" name="Amount1" id="Amount1">
    
    <input class="button is-info is-large" id="btn_save" name="btn_save" type="button" value="Save" />
    <p id='result'></p>           
</form>

2. 修改前端JS代码 #

• 给AJAX请求加cache:false禁用GET缓存
• 把清空输入框的.text('')全部替换为.val('')
• 增加请求异常的回调提示
  修复后代码：

<script>
$(document).ready(function(){
    $('#btn_save').click(function(){
        var data=$('#myform').serialize();
        $.ajax({
            url:'insert.php',
            type:'GET',
            data:data,
            cache:false, // 禁用GET请求缓存，避免重复提交不发请求
            success:function(response){
                $('#result').text(response);
                // 正确使用val()清空输入框值
                $('#Description').val('');
                $('#Unitys').val('');
                $('#quantitys').val('');
                $('#Text1s').val('');
                $('#PurchaseQty').val('');
                $('#Amount1').val('');
            },
            error:function(){
                $('#result').text('请求异常，请重试');
            }
        });
    });
});
</script>

3. PHP代码优化（解决隐性问题） #

• 删掉文件末尾误写的HTML注释，该注释会被直接输出到响应内容中，导致前端拿到的返回文本异常
• 写入类操作建议改用POST方法替代GET，更符合HTTP语义，也能避免参数暴露在地址栏（如果改POST，需要同步修改表单method属性、AJAX的type参数、PHP中接收参数的$_GET为$_POST）
• 建议使用PDO预处理语句替代直接拼接SQL，即使有转义函数也能进一步降低SQL注入风险

修复后的PHP参考代码：

<?php
$con = mysqli_connect("你的数据库地址","用户名","密码","库名");
if (isset($_GET['btn_save'])){
    
    $DescriptionZ =mysqli_real_escape_string($con,$_GET['Description']);
    $UnityZ = mysqli_real_escape_string($con,$_GET['Unitys']);
    $quantityZ =mysqli_real_escape_string($con,$_GET['quantitys']);
    $TextZ = mysqli_real_escape_string($con,$_GET['Text1s']);
    $PurchaseQtyZ = mysqli_real_escape_string($con,$_GET['PurchaseQty']);
    $AmountZ= mysqli_real_escape_string($con,$_GET['Amount1']);
    
    
    $sql= "INSERT INTO `orders`(`id`, `OrderID`, `Description`, `Unit`, `Quantity`, `Cost`, `Purchasing Qty`, `Amount`) 
    VALUES (NULL,'[555]','$DescriptionZ','$UnityZ','$quantityZ','$TextZ','$PurchaseQtyZ','$AmountZ')";
    $query=mysqli_query($con,$sql) or die(mysqli_error($con));
    if($query)
    {
        echo "Data Saved Successfully";
        
    } else {
        echo "Failed to save data";
    }
}
?>

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