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文件中获得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
            ));
    }

我将使用不止两行或三行，从产品表中提取产品表，我希望将产品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")

它会工作。

Answer 2

首先，您的按钮共享相同的ID，这不正常，因为ID用于标识页面上的一个元素（这就是为什么document.getElementById()在Element后没有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);
        }
    );
});

Answer 3

谢谢大家的建议和意见，现在我可以根据需要进行操作。

我真的应该学习id / class的东西，那是对男生的适当监督，对不起。

再次感谢

戴夫