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()没有的原因在s之后Element而document.getElementsByClassName()拥有它{}。改为使用类。

如果您想阻止默认行为发生（在这种情况下，表单提交），只需在回调函数的开头添加event.preventDefault();，并且不要忘记添加参数{ {1}}给你的回调。像这样：

event

Answer 3

感谢大家的建议和意见，我现在按照我的意愿开展工作。

我真的应该接受id / class的事情，那是适当的男生监督，对不起。

再次感谢

戴夫

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

3 个答案: