我正在尝试使用jquery ajax从表中删除一行。经过几次尝试后，我无法弄清楚为什么我的代码（删除部分）无法正常工作，因为我是ajax和javascript新手。从服务器使用ajax加载数据可以正常工作，并且脚本没有控制台错误。当我按Delete键时，“网络”选项卡上什么也看不到。这是我的代码：
routes.php
Route::delete('users/{id}','AjaxController@destroy');
AjaxController.php
public function destroy($id)
{
$user = User::findOrFail($id);
$user->delete();
}
视图：
<table id="users" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody id="abc">
</tbody>
</table>
脚本：
$(document).ready(function(){
var $tbody = $('#abc');
// getting data from server
$.ajax({
type : 'GET',
url : 'api/users',
success: function(users) {
$.each(users, function(i, user){
$tbody.append('<tr id="user_' + user.id + '"><td>'+user.name+'</td><td>'+user.phone+'</td><td><button type="button" class="btn btn-xs btn-danger" id="delete" value="'+user.id+'" name="button">Delete</button></td></tr>');
});
},
error: function(){
alert('error loading data');
}
});
// deleting data
$('#delete').on('click', function(e){
var user_id = $(this).val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
e.preventDefault();
var user = {
id : user_id
};
$.ajax({
type: 'DELETE',
url : '/user/'+user.id,
success : function(deleteUser)
{
$("#user_" + user_id).remove();
},
error : function()
{
alert('error deleting data');
}
});
}); // deleting block ends
});
});
这里的问题是您id反复使用相同的内容。但是，由于您正在动态插入内容，但是事件绑定仅观察页面加载时可用的元素，因此这一问题更加复杂。让我们解决所有这些问题。首先，我们需要取消ID。
class="btn btn-xs btn-danger" id="delete" value="'+user.id+'"
需要更改为
class="btn btn-xs btn-danger btn-delete" value="'+user.id+'"
大。我们已经习惯了btn-delete。这并非特定于此特定用户功能。CRUD的工作方式，您应该能够对通过CRUD控制器与之交互的每个模型重用此代码。
现在，我们需要委派事件绑定，并且还将使按钮更加通用，如上一段所述。出于篇幅的考虑，我只会显示您应该设置的javascript。
$('table').on('click', '.btn-delete', function(e){
e.preventDefault();
var $btn = $(this),
$table = $btn.closest('table');
$.ajax({
url: $table.data('resource') . '/' . $btn.val(),
type: 'delete'
}).done(function(response){
console.log(response);
}).error(function(x,t,m){
console.warn(x,t,m);
});
});
令牌可以移到top文件的，不需要嵌套：
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
最后，我们需要将data-resource属性附加到表中：
<table ... data-resource="users"
现在，您有了一个可重用的模型，只需要将一个data-resource="model"属性附加到表上，以及一个带有带有btn-delete值的类和id实体的按钮。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句