所以我创建了一个小的 Ajax 脚本,它从我的数据库和 View 中删除元素,不幸的是, View 只会在重新加载后发生变化(元素被删除)。
我可以在成功函数中执行 window.location.reload(),但我不想重新加载整个页面。
我该如何处理这个问题,这样我就不必重新加载整个页面,元素就会从 View 中删除。
<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 回调中,并从 UI 中删除它们:
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 元素执行类似的操作
关于javascript - 重新加载后 Ajax 删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44131362/