javascript - jQuery AJAX 请求仅发送第一个表单，忽略其他表单

Question

我正在尝试创建一个产品表，用户可以在其中添加和删除购物篮中的商品。我正在将购物篮内容写入数据库中的“临时”表。我最初只是通过 PHP 执行此操作，但不喜欢重定向，因此我尝试使用 jQuery 和单独的 PHP 文件来使事情变得更加干净和流畅。

现在，当我用单个产品行尝试此操作时，效果很好。所以我然后尝试了两行和三行。当我这样做时，它在第一行可以正常工作，但是，当我在第二行或第三行尝试它时，它会重定向到操作页面，我不明白为什么。它确实可以很好地写入数据库。

这是产品页面的代码

<table class="table table-condensed">
    <tr>
        <td>
            <form id="addItem" action="addBasket.php" method="post">
            <input type="hidden" name="product" value="3">
            <button id="add" class="btn btn-link"><i class="fa fa-plus-square-o"></i></button>
            </form>
        </td>
        <td>
            <form id="remItem" action="remBasket.php" method="post">
            <input type="hidden" name="product" value="3">
            <button id="rem" class="btn btn-link"><i class="fa fa-minus-square-o"></i></button>
            </form>
        </td>
        <td>
            <form id="remAll" action="allBasket.php" method="post">
            <input type="hidden" name="product" value="3">
            <button id="all" class="btn btn-link"><i class="fa fa-trash"></i></button>
            </form>
        </td>
    </tr>
    <tr>
        <td>
            <form id="addItem" action="addBasket.php" method="post">
            <input type="hidden" name="product" value="4">
            <button id="add" class="btn btn-link"><i class="fa fa-plus-square-o"></i></button>
            </form>
        </td>
        <td>
            <form id="remItem" action="remBasket.php" method="post">
            <input type="hidden" name="product" value="4">
            <button id="rem" class="btn btn-link"><i class="fa fa-minus-square-o"></i></button>
            </form>
        </td>
        <td>
            <form id="remAll" action="allBasket.php" method="post">
            <input type="hidden" name="product" value="4">
            <button id="all" class="btn btn-link"><i class="fa fa-trash"></i></button>
            </form>
        </td>
    </tr>
</table>

然后通过以下 Javascript 执行此操作:

$("#add").click( function() {


$.post( $("#addItem").attr("action"),
         $("#addItem :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
});

$("#addItem").submit( function() {
  return false;
});
$("#rem").click( function() {
 $.post( $("#remItem").attr("action"),
         $("#remItem :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
});

$("#remItem").submit( function() {
  return false;
});
$("#all").click( function() {
 $.post( $("#remAll").attr("action"),
         $("#remAll :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
});

$("#remAll").submit( function() {
  return false;
});

我会发布所有三个 addBasket.php、remBasket.php、allBasket.php，但您只需从 addBasket 文件中获取要点，如果我需要发布所有三个，请告诉我:

    require_once 'core/init.php';
$token = Session::get('user_session');
$product = $_POST['product'];

$exists = DB::getInstance()->query("SELECT * FROM temp WHERE token='$token' AND product='$product'");
    if($exists->count()){
        $qty = $exists->first()->qty + 1;
        DB::getInstance()->query("UPDATE temp SET qty='$qty' WHERE token='$token' AND product='$product'");
    }else{
        DB::getInstance()->insert('temp', array(
            'token' => $token,
            'product' => $product,
            'qty' => 1
            ));
    }

我将使用多于两行或三行，产品表将从产品表中提取，我希望使用产品 ID 作为每行隐藏字段的值。

我想知道的主要是如何阻止重定向的发生，如果有人能为此建议一个更简洁或更有效的方法，我将不胜感激。

非常感谢

戴夫

Answer 1

好吧，问题是你如何在 jQuery 中选择它们以及你如何拥有\ 用 HTML 命名它们。

您不应多次使用相同的 ID，而应使用类。当您对多个实例使用相同的 ID 时，HTML DOM 模型仅接受最上面的元素或第一个元素。

所以改变:

<form id="addItem" action="addBasket.php" method="post">

至

<form class="addItem" action="addBasket.php" method="post">

在 jQuery 中:

$(".additem")

它会起作用。