ajax 调用仅首先导致 php 输出[关闭]答案

【问题标题】：ajax call only first result in php output [closed]ajax 调用仅首先导致 php 输出[关闭]
【发布时间】：2022-01-18 11:12:25
【问题描述】：

我正在尝试将数据发布到 php 文件。

假设 php 结果中列出了大约 20 种产品 (P1 - P20)。

当我们点击 P5 的 Add to Cart 按钮时，它应该将所选 P5 的数量和 productid 发布到 pre-cart.php

但它发布了第一个结果，即 P1

我使用了以下代码：

<?php 
...

if($query->rowCount() > 0)
{
foreach($results as $result)
{?>

                      <form>
                        <input class="qty-text" type="text" id="order" name="order" value="<?php echo htmlentities($result->minor);?>">
                        <input class="qty-text" type="hidden" type="text" id="product" name="product" value="<?php echo htmlentities($result->proid);?>">
                    <button type="submit" class="btn btn-primary" onclick="return clickButton();">Add to Cart</button></form>
<?php }} ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function clickButton(){
    var quantity=document.getElementById('order').value;
    var product=document.getElementById('product').value;
    $.ajax({
        type:"post",
        url:"pre-cart.php",
        data: 
        {  
           'quantity' :quantity,
           'product' :product
        },
        cache:false,
        success: function (html) 
        {
           alert('Data Send');
           $('#msg').html(html);
        }
    });
    return false;
 }
</script>

【问题讨论】：

该代码中只有一个数量/产品对，不是吗？您能否详细说明问题所在？你确定它不在 PHP 代码中吗？
我不明白应该给你的代码什么“第二个结果”。
“第一个结果”是什么意思？结果是什么？什么会构成“第二个结果”？您的表单中恰好有两个字段，并且您正在将两个字段发送到 PHP。我怀疑您没有向我们提供您的问题的minimal reproducible example。请更新问题，以便我们完全理解问题。
jQuery 3.4.1 has known security issues。你应该升级。
如果您在页面上重复前三行（使用不同的值），请记住 id 在页面上必须是唯一的，如果有多个会混淆问题。

标签： javascript php jquery ajax

【解决方案1】：

您的 PHP 代码正在生成多个表单。这意味着您将拥有多个具有相同 ID 的输入。这在 HTML 中无效 - 根据定义，ID 必须是唯一的。因此，当您运行 document.getElementById('order').value 之类的内容时，它始终会选择它找到的第一个具有该 ID 的元素 - 所有其他元素都被视为错误并被忽略。

不过，由于您对每组数据都有一个单独的<form，因此您无需为每个字段挑选具有特定代码的值。

相反，只需处理表单的“提交”事件并让 jQuery 自动序列化其中的所有数据，准备通过 AJAX 发送到服务器。

像这样。请注意对 HTML 和 jQuery 代码的更改。

<?php 
...

if($query->rowCount() > 0)
{
  foreach($results as $result)
  {?>

    <form class="cartForm">
      <input class="qty-text" type="text" name="quantity" value="<?php echo htmlentities($result->minor);?>">
      <input class="qty-text" type="hidden" type="text" name="product" value="<?php echo htmlentities($result->proid);?>">
      <button type="submit" class="btn btn-primary">Add to Cart</button>
    </form>
<?php 
  }
} 
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".cartForm").submit(function(event) { //handle "submit" event of the form
    event.preventDefault(); //prevent default postback

    $.ajax({
        type:"post",
        url:"pre-cart.php",
        data: $(this).serialize(), //auto-serialize the form data
        cache:false,
        success: function (html) 
        {
           alert('Data Sent');
           $('#msg').html(html);
        }
    });
  });
});
</script>

文档：

提交事件：https://api.jquery.com/submit/
序列化函数：https://api.jquery.com/serialize/

【讨论】：