Javascript ajax将数据传递给php后，页面将不会加载第一个条目，但仍会加载其余条目

在我的网页中，我想显示从服务器获取的所有项目，在每个项目下，都有一个“完成”按钮。当按下compete按钮时，项目的id将被发送到一个php文件。我的表格的代码是：

<?php 
    $x = $NumberofItems;
    while ($x > 0) :
?>  

<p><i class="fa fa-question" style="color:#ffff00"></i> On <?php echo htmlspecialchars($date_Quest[$x])?>: <?php echo htmlspecialchars($desc_Quest[$x])?></p>
<form id="formQuestComplete" action="quest-complete.php" method="post" style="display: inline-block;">
    <input type="hidden" name="QuestID" value="<?php echo $id_Quest[$x]; ?>"/>
    <button id="subQuestComplete" class="btn btn-default btn-xs">Complete</button> 
</form>

<?php       
    $x--;
    endwhile;
?>

---

例如，当表单列出10个项目时，只有第一个项目会发送数据并停留在同一页面上。其余的都将发送数据，但随后重定向到php页面。

您必须修改代码，如下所示：

$("#subQuestComplete").click( function(e) {
    e.preventDefault();
    $.post( $("#formQuestComplete").attr("action"), $("#formQuestComplete :input").serializeArray(),function(info){ 
        $("#result").html(info);
    });
});

。单击（函数（e）{e.preventDefault（）；

在这之后，剩下的代码

如果不执行此操作，则原始的单击事件处理程序也将运行。一段时间后

因此，您的代码应该如下所示：

$("#subQuestComplete").click( function(e) {
    e.preventDefault();
    $.post( $("#formQuestComplete").attr("action"), $("#formQuestComplete :input").serializeArray(),function(info){ 
        $("#result").html(info);
    });
});

---

更改PHP代码以确保为项提供了类而不是id（因为id必须是唯一的，否则将无法正确处理）-

---

由于元素现在由类标识，因此可以遍历DOM树以分别查找每个表单的表单值，而不管页面中可能有多少个表单值。

谢谢。但它不起作用。我添加了e.preventDefault（）；但一切都保持不变。当单击第一项下的按钮时，它不会重定向。当单击其他项下的按钮时，它重定向。OP使用

返回false；

这将阻止重定向-但仅在第一项上，因为id不是唯一的。啊，真的。应该更改为类。您正在创建m多个具有相同id和id的项目在网页中必须是唯一的。如果它们不是唯一的，您将得到有趣的结果，如第一个链接工作，但其他链接不工作。非常感谢！工作完美。

<?php 
    $x = $NumberofItems;
    while ($x > 0) :
?>  

<p><i class="fa fa-question" style="color:#ffff00"></i> On <?php echo htmlspecialchars($date_Quest[$x])?>: <?php echo htmlspecialchars($desc_Quest[$x])?></p>
<form class="formQuestComplete" action="quest-complete.php" method="post" style="display: inline-block;">
    <input type="hidden" name="QuestID" value="<?php echo $id_Quest[$x]; ?>"/>
    <button class="subQuestComplete" class="btn btn-default btn-xs">Complete</button> 
</form>

<?php       
    $x--;
    endwhile;
?>

$(".subQuestComplete").click( function(e) { // handle the button click
    e.preventDefault(); // prevent the click's default action
    var thisForm = $(this).parent('form'); // get this form
    var thisData = $(this).parent('form').find('input').val();
    $.post( 
        $(thisForm).attr("action"),
        {QuestID: thisData}, // no need to serialize for a one value form
        function(info){ 
            $("#result").html(info);
    });
});