Laravel ajax 请求不适用于 foreach 循环

Question

我已经在我的控制器中收集了一些数据。现在在我看来，我已经将它们显示在一个无序列表 (ul) 中作为链接。

<ul>
    <li><a>....</a></li>
</ul>

现在当我尝试触发 ajax 请求时，只有最后一个数据（即列出的项目中的最后一个链接）响应 ajax 请求。Ajax 脚本不在 foreach 循环内。我必须放置 ajax在foreach循环里面写脚本。那么，对于每一个数据都会有一个脚本。会不会产生问题？

<ul>
@foreach ($brands as $brand)
     <li class='n1'><a href="{{$brand->id}}"  id="{{$brand->brand}}">{{$brand->brand}}</a></li>
@endforeach
</ul>

我的 ajax 脚本：

<script>

$('#{{$brand->brand}}').on('click',function(e){
    e.preventDefault();

    $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

   $.ajax({
      type:"POST",
      url:'/userproduct',
      data: { value: $('#{{$brand->brand}}').attr('href')},
      success:function(data) {
          console.log(data);
      }        
  });
});
</script>

在我的控制器中

public function userproduct(Request $request){
   $value=$request->input('value');
   return Response::JSON($value);
}

Answer 1

IMO，{{$brand->brand}} 作为“id”没有意义。你可以这样做，
id="product-{{$brand->brand}}"
由于您只是在写$('#{{$brand->brand}}').on('click',function(e){});，这意味着您只注册了一个节点。

如何克服这个问题？

为这些链接应用一个特定的类。向该类注册点击事件。使用 HTML5 data-* api 来获取链接等。就是这样。

Answer 2

首先，对a元素进行如下修改，例如：

<a class="brand" href="{{url('userproduct')}}" data-id="{{$brand->id}}">
    {{$brand->brand}}
</a>

然后使用以下代码：

$(document).ready(function() {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('a.brand').on('click',function(e) {
        var el = $(this);
        $.ajax({
            type: "POST",
            url: el.attr('href'),
            data: { value: el.attr('data-id')},
            success: function(data) {
                console.log(data);
            }        
        });

        e.preventDefault();
    });
});

这应该可行，但请确保您还使用post 方法为userproduct 声明了一条路由，例如：

Route::post('/userproduct', 'SomeController@handlerMethodName');

如果无法正常工作，请检查浏览器控制台以找出错误详细信息并尝试解决问题。工作流程正常，如果一切顺利，应该可以正常工作。

---

注意：还有其他方法可以做到这一点（使用不同的代码/方法），但这是一个简化的代码，具体取决于您在问题中给出的代码。例如，我可以使用ul 来使用事件委托注册事件处理程序，但这也可以。

Answer 3

您正在使用 ajax 中最后一项的 id。这就是为什么只有列出项目中的最后一个链接响应ajax 请求。像这样使用类而不是id：

<li class='n1'><a class="myclass" href="{{$brand->id}}">{{$brand->brand}}</a></li>

JS：

<script>
$('.myclass').on('click', function(e) {

    e.preventDefault();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({

        method: "POST",
        url: '/userproduct',
        data: {
            value: $(this).attr('href')
        },
        success: function(data) {
            console.log(1);

        }

    });
});

</script>

它应该可以工作。