javascript - Laravel 按 href 提交删除表单

Question

我在 Laravel 5.4 中有一个表，它正在显示具有删除选项的新闻。代码如下:新闻.blade.php:

@foreach($news as $article)
   <tr class="text-center">
       <td>{{ $article->title }}</td>
       <td>{{ $article->created_at }}</td>
       <td>{{ $article->views }}</td>
       <td>
          <a class="btn btn-primary btn-flat" href="#">
             <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
          </a>
       </td>
       <td>
           <a class="btn btn-warning btn-flat" href="#" onclick="event.preventDefault(); document.getElementById('delete-form').submit();">
                 <i class="fa fa-lg fa-trash"></i>
           </a>

           <form action="{{ route('delete-article') }}" method="POST" id="delete-form" style="display: none;">
                {{csrf_field()}}
                <input type="hidden" value="{{ $article->id }}" name="id">
           </form>
        </td>
   </tr>
@endforeach

我的问题是如何告诉 javascript 准确提交紧挨着 a href 的表单，因为现在它会提交第一个与 id 匹配的表单，而 id 并不总是与被点击的 td 相同引用

编辑:我知道我可以尝试使用 jquery 访问单击的 href 的父级，然后访问它的子窗体或使用 jquery 的关闭函数，但我正在寻找更稳定的东西。

Answer 1

在做任何事情之前，你的路线应该是(如果还没有完成的话):
Route::delete(...)->name('delete-article');

我认为你可以这样做:

   <a class="btn btn-warning btn-flat" href="#" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $article->id }}').submit();">
         <i class="fa fa-lg fa-trash"></i>
   </a>

   <form action="{{ route('delete-article') }}" method="POST" id="delete-form-{{ $article->id }}" style="display: none;">
        {{csrf_field()}}
        {{ method_field('DELETE') }}
        <input type="hidden" value="{{ $article->id }}" name="id">
   </form>

或者使用 Ajax

@foreach($news as $article)
   <tr class="text-center">
       <td>{{ $article->title }}</td>
       <td>{{ $article->created_at }}</td>
       <td>{{ $article->views }}</td>
       <td>
          <a class="btn btn-primary btn-flat" href="#">
             <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
          </a>
       </td>
       <td>
           <a class="btn btn-warning btn-flat" href="#" onclick="callAjax({{ $article->id }})">
                 <i class="fa fa-lg fa-trash"></i>
           </a>
        </td>
   </tr>
@endforeach

<script>
function callAjax(articleId) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })

    $.ajax({
        type: 'POST',
        url: '{{ route('delete-article') }}',
        data: {_method: 'DELETE', id: articleId}
    })
    .done(function (data) {
        // DO SOMETHING OR NOT
     }).error(function (err) {
        // DO SOMETHING OR NOT
     });
}

</script>

您必须指定 <meta name="csrf-token" content="{{ csrf_token() }}">在你的文件头。 ( https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token )