Javascript jQueryAjax请求只发送第一个表单，而忽略其他表单

我正在尝试创建一个产品表，用户可以在其中向购物篮添加和删除项目。我正在将篮子内容写入数据库中的“temp”表。我最初只是让它通过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>

我会发布所有三个addBasket.php、remBasket.php、allBasket.php，但您可以从addBasket文件获得jist，如果我需要发布所有三个，请让我知道：

    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
            ));
    }

我将使用更多的两到三行，product表将从products表中提取，我希望使用products id作为每行隐藏字段的值

我想知道的主要是如何阻止重定向的发生，如果有人能提出一种更简洁或更有效的方法，我将不胜感激

非常感谢

---

Dave

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

您不应该多次使用同一ID，而应该使用类。当您对多个实例使用相同的ID时，HTMLDOM模型只接受最顶层的元素或第一个元素

因此，改变：

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

---

它会起作用。

首先，您的按钮共享相同的ID，这是不正常的，因为ID用于标识页面上的一个元素（这就是为什么

document.getElementById（）

在

元素之后没有
s
，而
document.getElementsByClassName（）
有它的原因）。改用类

如果要防止发生默认行为（在本例中为表单提交），只需添加
event.preventDefault（）
在回调函数的开头，不要忘记将参数
event
添加到回调函数中。像这样：

$(".all").click(function(event) {
    event.preventDefault();
    $.post(
        $(this).parent().attr("action"),
        $(this).parent().find(':input').serializeArray(),
        function(info){
             $("#result").html(info);
        }
    );
});

谢谢你们所有人的建议和意见，我现在让它按照我的意愿工作

我真的应该把身份证/班级的事情讲清楚，这是男生的疏忽，对不起

再次感谢

Dave
您不能多次使用同一ID。在本例中，使用类。埃克斯。class=“addItem”和class=“Revieem”。谢谢，我使用了这个，它极大地帮助我获得了我的整体解决方案，我想升级投票，但我还没有所需的声誉，请接受我的感谢，当我获得所需的声誉时，我将返回并升级投票。很高兴看到它起作用，您可以将答案设置为已接受，如果您愿意：）谢谢，我使用了这个，它极大地帮助我获得了我的整体解决方案，我想提高投票率，但我还没有所需的声誉，请接受我的感谢，当我获得所需的声誉时，我将返回并提高投票率。
<form class="addItem" action="addBasket.php" method="post">

$(".additem")

$(".all").click(function(event) {
    event.preventDefault();
    $.post(
        $(this).parent().attr("action"),
        $(this).parent().find(':input').serializeArray(),
        function(info){
             $("#result").html(info);
        }
    );
});