Ajax为每个循环添加按钮Laravel 5.4

Question

我正在尝试在foreeach 循环中创建一个“添加按钮”。并使用 ajax 提交。但是我很难找出我到底做错了什么，我的 JS 知识很差。

这是我的代码。

查看：

 @foreach ($lots as $lot)
     @if (count($lot->comments) >= 1)
          <span class="glyphicon glyphicon-ok"></span>
     @else
          <form id="favorites-button" data-id="{{ $lot->lot_id }}">
          {{ csrf_field() }}
          <input type="hidden" name="body" value="0_o" class="form-control">
          <button type="submit" class="btn btn-xs btn-primary">Favorites</button>
          </form>
     @endif
 @endforeach

这是我的 JS

 @section('js')
        <!-- Ajax add to favorites -->
        <script type="text/javascript">
            $("document").ready(function(){
                $("#favorites-button").submit(function(e){
                    e.preventDefault();
                    var button = $(this);
                    var url = '/lots/' + button.data('id') + '/comment';
                    var body = $("input[name=body]").val();
                    var dataString = 'body='+body;
                    $.ajax({
                        type: "POST",
                        url : url,
                        data : dataString,
                        dataType : "json",
                        success : function(data){

                        }

                    },"json");

                });
            });
        </script>
   @endsection

这是我的路线：

Route::post('/lots/{lot}/comment', 'CommentsController@add');

还有我的控制器：

public function add(Lot $lot)
    {
        Comment::create([
            'body'            => request('body'),
            'lot_id'          => $lot->lot_id,
            'user_id'         => auth()->user()->id,
            'bid'             => $lot->bid,
            'lot_date'        => $lot->lot_date,
            'auction_name'    => $lot->auction_name,
            'pics_urls'       => $lot->pics_urls,
            'company'         => $lot->company,
            'model_name_en'   => $lot->model_name_en,
            'model_type_en'   => $lot->model_type_en,
            'scores_en'       => $lot->scores_en,
            'model_year_en'   => $lot->model_year_en,
            'color_en'        => $lot->color_en,
            'displacement'    => $lot->displacement,
            'transmission_en' => $lot->transmission_en,
            'start_price_en'  => $lot->start_price_en,
            'inspection_en'   => $lot->inspection_en,
            'grade_en'        => $lot->grade_en,
            'equipment_en'    => $lot->equipment_en,
            'mileage_num'     => $lot->mileage_num,
            'result_en'       => $lot->result_en,
            'auct_ref'        => $lot->auct_ref,
        ]);

        return "ok";
    }

所以我认为问题也在于我在foreach 循环中使用的ID。这意味着循环中的所有表单都具有相同的 ID。所以我需要重新考虑我的整个方法。任何人有想法我该怎么做？

Answer 1

<script type="text/javascript">
    $("document").ready(function(){
        $("#favorites-button").submit(function(e){
            e.preventDefault();
            var button = $(this);
            var url = '/lots/' + button.data('id') + '/comment';
            var body = $("input[name=body]").val();
            $.ajax({
                type: "POST",
                url: url,
                data: {
                  body: body,
                  _token: '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(data){
                  console.log('success');
                }

            },"json");

        });
    });
</script>

我觉得有帮助。

Answer 2

所以我一开始就做错了！

我改变了整个方法。感谢朋友的帮助。

现在首先我将 form 更改为 Button 女巫调用事件：

这是视图：

 @foreach ($lots as $lot)
     @if (count($lot->comments) >= 1)
        <span class="glyphicon glyphicon-ok"></span>
     @else
        <button data-id="{{ $lot->lot_id  }}" class="btn btn-xs btn-primary favouriteButton">Favourite</button>
     @endif
 @endforeach

比我改JS：

<!-- Ajax add to favorites -->
    <script type="text/javascript">
        // call button via class
        $('.favouriteButton').click(function (e) {
            var button = $(this);
            e.preventDefault();
           // change the route 
            $.get('/lots/' + $(this).data('id') + '/favourite')

                .done(function (response) {
             // instead of button insert check icon
                    button.parent().append('<span class="glyphicon glyphicon-ok"></span>');
             // remove button
                    button.remove();

                })
                .fail(function (respnse) {

                });
        });
    </script>

比我改变我的路线：

Route::get('/lots/{lot}/favourite','CommentsController@favouriteButton');

并创建了新功能：

public function favouriteButton(Lot $lot){
        Comment::create([
            'body'            => 'Auto add', // this is the body for new comment 
            'lot_id'          => $lot->lot_id,
            'user_id'         => auth()->user()->id,
            'bid'             => $lot->bid,
            'lot_date'        => $lot->lot_date,
            'auction_name'    => $lot->auction_name,
            'pics_urls'       => $lot->pics_urls,
            'company'         => $lot->company,
            'model_name_en'   => $lot->model_name_en,
            'model_type_en'   => $lot->model_type_en,
            'scores_en'       => $lot->scores_en,
            'model_year_en'   => $lot->model_year_en,
            'color_en'        => $lot->color_en,
            'displacement'    => $lot->displacement,
            'transmission_en' => $lot->transmission_en,
            'start_price_en'  => $lot->start_price_en,
            'inspection_en'   => $lot->inspection_en,
            'grade_en'        => $lot->grade_en,
            'equipment_en'    => $lot->equipment_en,
            'mileage_num'     => $lot->mileage_num,
            'result_en'       => $lot->result_en,
            'auct_ref'        => $lot->auct_ref,
        ]);

        return "ok";
    }

我希望我的经验对一些人有所帮助。