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

首先，在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 2

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

如何克服这个？

为这些链接应用特定类。在该类中注册click事件。使用，HTML5 data- * api获取链接，就像这样。那就是它。

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>

它应该有用。

Laravel ajax请求不适用于foreach循环

3 个答案:

如何克服这个？