JavaScript提交表单无Form数据问题：原因排查与方案问询

Hey there, let's work through your form submission issue clearly:

最优方案：复用现有表单 #

毫无疑问，复用现有表单是更优的选择——不需要额外创建新表单节点，减少冗余代码，也能和你已有的页面逻辑更好地契合，避免不必要的DOM操作。

为什么JS调用$("#Form").submit()时没有Form数据？ #

这里的核心差异在于浏览器处理两种提交方式的逻辑不同：

• 当你手动点击<button type="submit" name="Form">Finish</button>时，浏览器会自动将这个提交按钮的name和value（哪怕是空值）纳入表单提交的数据中，所以后端能检测到$_POST['Form']。
• 但通过JavaScript调用form.submit()方法时，浏览器不会触发提交按钮的表单数据携带逻辑——也就是说，这个按钮的name="Form"不会被作为表单参数发送到后端，导致后端isset($_POST['Form'])判断为false，让你误以为整个表单没有数据。

你添加的<input type="hidden" name="Form" value="" />属于表单的常规字段，不管是手动点击提交还是JS触发submit()，都会被浏览器自动包含到提交数据里，所以后端能正常检测到$_POST['Form']，问题自然解决。

修正后的完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php 
if (isset($_POST['Form'])) {
    // 这里执行你的数据库操作逻辑
} 
?>

<form method="post" id="Form" action="" >
    <input type="hidden" name="Form" value="" />
    <button type="submit" name="Form">Finish</button>
</form>

<script>
function recuppoint() {
    $.post('../ajax/point.php',{pseudo:pseudo}, function(data) {
        console.log('['+data + ']');
        $('.infos2').html(data);
        var durr = data.split(" :");
        var test = durr[1].split(" ");
        if(test[1]==0){
            $("#Form").submit();
        }
        console.log(test[1]);
    });
}// End of the function
setInterval(recuppoint, 1000);// Refresh it each second
</script>

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