如何使用 ajax 在循环中获取每个不同的表单破坏值？

Question

我在产品系列页面上有循环产品，我想用 jQuery 和 ajax 获取每个产品的价值，但我有代码，只有在我们点击任何产品的添加时才获得第一个产品价值到购物车按钮，只显示第一个产品，下面是我的代码：

function addItem(form_id) {
  var postData = $('#'+form_id).serialize();
  alert(postData);
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
   dataType: 'json',
  data: $('#'+form_id).serialize(),
  success: addToCartOk,
  error: addToCartFail
});

}

我在这里检查：https://soft-theme.myshopify.com/collections/all 它只得到 id=27733468427 我点击哪个按钮

有人可以帮我解决这个问题吗？

Answer 1

https://api.jquery.com/each/

您想使用 jquery 的每个属性。希望对您有所帮助。

Answer 2

您有多个具有相同 ID 的表单。这在HTML DOM中是不允许的：每个id="..."属性应该是唯一的，不能使用具有相同id="add-to-cart"的多个形式。当浏览器遇到多个具有相同 id 的对象时，它会忽略具有此 id 的其他对象，因为 id 应该是唯一的。

您可以改用 class="add-to-cart"。

（另外，从添加按钮中删除 id="add"，它也是重复的 id。您可以改用 class。）

此外，您实际上并不需要在代码中传递 ID。您可以使用 this 获取包裹元素的表单，它指的是单击的按钮（但是，它需要用 $ 包裹才能将 DOM 对象转换为 jQuery 对象):

因此，您可以在表单中使用它：

<form method="post" action="/cart/add" class="add-to-cart">
  <input type="text" name="id" value="27733468427" class="ppp" />
  <input type="submit" name="add"
         value="Add to Cart"
         onclick="addItem(this); return false;"/>
</form>

这是对 <input type="submit" ... /> 元素的引用。因此，您可以使用 .closest 来获取包装此元素的表单，如下所示：

function addItem(button) {
  var $button = $(button);
  var $form = $button.closest('form');
  var postData = $form.serialize();
  alert(postData);
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
   dataType: 'json',
  data: $form.serialize(),
  success: addToCartOk,
  error: addToCartFail
});

不过，这不是推荐的处理方式。 onclick="..." 是一种不推荐使用的处理方式，因为您将 JavaScript 与 HTML 混合在一起。相反，建议一起删除 onclick="..." 并在 <script> 代码中绑定事件回调。为此，只需删除表单中的 onclick：

<form method="post" action="/cart/add" class="add-to-cart">
  <input type="text" name="id" value="27733468427" class="ppp" />
  <input type="submit" name="add"
         value="Add to Cart"/>
</form>

并使用 class add-to-cart 绑定方法（确保你已经将其放入 class，否则我的代码将无法运行）：

$(function() {
  $("form.add-to-cart").submit(function () {
    var $form = $(this);
    var postData = $form.serialize();
    alert(postData);
    $.ajax({
      type: 'POST',
      url: '/cart/add.js',
      dataType: 'json',
      data: $form.serialize(),
      success: addToCartOk,
      error: addToCartFail
    });
    return false;
});

上面的代码执行以下操作：

代码周围的 $(function() { ... }); 确保在加载所有元素时代码仅运行。
$("form.add-to-cart") 查找带有 class="add-to-cart"
$("form.add-to-cart").submit(function () { ... }); 添加回调函数。每次提交带有 class="add-to-cart" 的任何表单时都会调用此函数。

这是 onclick 的推荐替代方法。

更新： 我的代码的第一个版本有一个错误：因为 $("form.add-to-cart").submit 附加到表单，而不是按钮，我们应该使用 $(this) 来引用表格。在第二个版本的代码中我们不需要 closest。

如何使用 ajax 在循环中获取每个不同的表单破坏值？

How to get each different value of form ruining in loop with ajax?

ajax

jquery

shopify