Ang*_*nov 2 javascript forms jquery laravel
我在 Laravel 5.4 中有一个表,它显示带有删除选项的新闻。代码如下:news.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
Run Code Online (Sandbox Code Playgroud)
我的问题是如何告诉 javascript 准确提交紧邻 a href 的表单,因为现在它将提交与 id 匹配的第一个表单,该 id 并不总是与单击的 a href 位于同一 td 中
编辑: 我知道我可以尝试使用 jquery 访问单击的 href 的父级,然后访问它的子表单或使用 jquery 的 closes 函数,但我正在寻找更稳定的东西。
在做任何事情之前,你的路线应该是(如果尚未完成):
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>
Run Code Online (Sandbox Code Playgroud)
或者使用阿贾克斯
@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>
Run Code Online (Sandbox Code Playgroud)
您必须<meta name="csrf-token" content="{{ csrf_token() }}">在文档标题中指定。(https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token)
| 归档时间: |
|
| 查看次数: |
3799 次 |
| 最近记录: |