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

Question

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

首先加载页面 a.php 然后按 OK 按钮 为什么不回显 $_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"]; ?>

Answer 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>