为什么我在通过 not loadpage 使用 javascript 提交表单时无法获取发布数据？答案

【问题标题】：Why i not get post data when use javascript submit form by not loadpage?为什么我在通过 not loadpage 使用 javascript 提交表单时无法获取发布数据？
【发布时间】：2016-04-26 11:02:45
【问题描述】：

为什么我在不加载页面使用javascript提交表单时无法获取发布数据？

先加载页面a.php然后按OK button为什么不回显$_POST["id"]

这里是javascript代码

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

<form id="myForm" name="myForm" action="b.php" method="post">
    <input type="text" name="id" value="1111111111111111111">
    <button name="element" id="element" type="submit">OK</button>
    <div id="element_loading" style="display: none;">loading..................</div>
    <span id="element_result"></span>
</form>

<script type="text/javascript">
$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $("#myForm").attr("action"),
        data: $("#myForm:input").serializeArray(),
        type: 'post',
        dataType: 'html',
        success: function(data){
            $("#element_result").html(data);
        },
        beforeSend: function(){
            document.getElementById("element").disabled = true;
            document.getElementById("element_loading").style.display="inline";
            $("#element_result").hide()
        },
        complete: function(data){
            document.getElementById("element").disabled = false;
            document.getElementById("element_loading").style.display="none";
            $("#element_result").show()
        }
    });
});
</script>

这是php代码

<?PHP echo $_POST["id"]; ?>

【问题讨论】：

按F12打开控制台，查看是否有错误提示。
@Phiter Fernandes -- 没有看到任何错误。
打开网络选项卡并按 F5。检查是否正在请求 b.php 页面。
$("#myForm:input") 你的选择器是错误的，它要么是#myForm :input 中间有一个空格，要么只是id #myForm，
要在form 中查找:input 元素，您必须在selector 中有一个空格，因为:input 是form 的子元素！

标签： javascript php forms

【解决方案1】：

最好的办法是序列化整个表单，这可以使用serialize 函数来完成。这个功能是专门为这样的事情而设计的。 :)

<script type="text/javascript">
$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $("#myForm").attr("action"),
        data: $("#myForm").serialize(), // <-- Like this
        type: 'post',
        dataType: 'html',
        success: function(data){
            $("#element_result").html(data);
        },
        beforeSend: function(){
            document.getElementById("element").disabled = true;
            document.getElementById("element_loading").style.display="inline";
            $("#element_result").hide()
        },
        complete: function(data){
            document.getElementById("element").disabled = false;
            document.getElementById("element_loading").style.display="none";
            $("#element_result").show()
        }
    });
});
</script>

【讨论】：

【解决方案2】：

只要改变这个：

$.ajax({
   ...     
   data: $("#myForm").serializeArray(), // change
   ...
});

【讨论】：

因为 serializeArray 方法可以作用于选择单个表单控件的 jQuery 对象，例如、和 <select>。所以我们不需要添加 :input</select>
@DharaParmar 但是如果我们只想要输入类型的值，那么为什么我们要使用整个 id('#myForm') 呢？这没有意义。
$('#myForm input').serialize();现在有意义吗？