因此,我创建了一个小的Ajax脚本,该脚本从数据库和视图中删除了项目,不幸的是,视图仅在重新加载后才发生更改(项目被删除)。
我可以在我的成功函数中执行window.location.reload(),但是我不想重新加载整个页面。
我该如何处理,这样我就不必重新加载整个页面并且该项目会在视图中删除。
<script>
$(document).ready(function() {
$(".destroy-device").click(function(e) {
e.preventDefault();
var id = $(this).attr("data-id");
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
});
$.ajax({
url: 'destroy/'+id,
type: 'post',
data: {_method: 'delete',
id: id},
success:function(data) {
console.log('success');
}
});
})
});
</script>
的HTML:
<form method="post">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="id" value="{{ $deviceValue->id }}">
<button type="button" class="btn btn-danger destroy-device" data-id="{{ $deviceValue->id }}" name="destroy_device">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>
最佳答案
假设您有一个项目列表(从数据库中加载),并且执行了ajax调用以从数据库中删除其中一些项目。
您可以将已删除项目的ID返回到ajax回调中,然后从用户界面中将其删除:
的HTML
<ul id="myList">
<li data-item="1">Item one</li>
<li data-item="2">Item two</li>
<li data-item="3">Item three</li>
</ul>
jQuery的
$.ajax({
...
success: function(data) {
// data --> Array of deleted items (data-item)
if (data) {
var list = $('#myList');
for(var i=0;i<data.length;i++) {
list.children('li[data-item="' + data[i] + '"]').remove();
}
}
}
});
您可以对表或其他UI元素执行类似的操作