Foreach产品点击'this'，用AJAX提交[Laravel]

Question

我有一个商店页面，并在其上放一个foreach循环通过产品。在“添加到购物车”按钮上，我通过AJAX调用并在那里添加产品。虽然，我添加了另一个产品，它不起作用，甚至在我做测试时记录的CSRF_TOKEN or Data-IDis。 （仅限第二个产品，第一个产品）

@foreach 

{{ $product->title }}
{{ $product->price }}

<form action="#" method="post">
<button class="btn btn-default" data-id="{{$product->slug}}" id="addCart" type="submit" >Add To Cart</button>
</form>

@endforeach

AJAX在此之后出现，它可以工作，虽然我无法获得我的数据ID甚至是控制台日志

$("#addCart").click(function(e) {
        e.preventDefault();
var slug = $(this).attr("data-id");

console.log(slug);

var csrf = "{{ csrf_token() }}"

console.log(csrf);

Answer 1

对click()事件使用class而不是ID，并使用自己的slug定义ID，以便可以使用.attr('id')。

变化：

<button class="btn btn-default addCart" id="{{$product->slug}}">Add To Cart</button>

和

$(".addCart").click(function(e) {
    e.preventDefault();
    var slug = $(this).attr("id");

    console.log(slug);
}

更新：如果使用循环创建多个元素，请使用类对它们执行操作，并使用ID获取这些元素的唯一值。

Answer 2

你的PHP代码部分

 @foreach 

{{ $product->title }}
{{ $product->price }}

<form action="#" method="post">
<button class="btn btn-default addCart" data-id="{{$product->slug}}" 
type="submit" >Add To Cart</button>
</form>

@endforeach

像这样改变你的js部分。

$(".addCart").click(function(e) {
    e.preventDefault();
var slug = $(this).attr("data-id");
console.log(slug);
var csrf = "{{ csrf_token() }}"
console.log(csrf);
});

Answer 3

您可能在控制器操作中有类似的东西

return view('name.of.view', ['product' => $product]);

您的代码有效，因为您在视图中使用了$product，但是您使用@foreach的方式不对。

将操作更改为：

public function index() 
{
    $products = Product::all(); // or whatever constrains you have

    return view('name.of.view', ['products' => $products]);
}

在你看来：

@foreach($products as $product)
  {{ $product->title }}
  {{ $product->price }}

  <form action="#" method="post">
      <button class="btn btn-default" data-id="{{$product->slug}}" id="addCart" type="submit" >Add To Cart</button>
  </form>
@endforeach