AJAX+PHP无需刷新或点击按钮从DB拉取数据：删除后表格不更新问题

问题原因 #

你当前的代码缺失了删除请求成功后触发表格刷新的逻辑，同时异步执行顺序也存在问题：

1. 删除功能的AJAX请求success回调为空，删除操作执行完成后没有通知前端更新页面内容
2. 删除成功提示写在了AJAX请求外部，由于AJAX是异步执行的，会出现删除请求还没返回结果就提前弹出成功提示的异常情况

修改方案 #

1. 封装表格加载公共函数 #

将原来页面加载时执行的表格加载逻辑封装为独立函数，方便后续删除、新增、编辑操作完成后复用刷新：

// 加载博客列表表格
function loadBlogTable() {
  $("#blog_table").load("functions/blog_list.php");
}

$( document ).ready(function() {
  // 页面首次加载时渲染表格
  loadBlogTable();
});

2. 修改删除函数逻辑 #

在删除AJAX的成功回调中加入表格刷新逻辑，同时把成功提示移动到回调内部，保证执行顺序正确：

function deleteFunction(id) {
  event.preventDefault();
  var blog_id = id;
  Swal.fire({
    title: '确定要删除这篇博客吗？',
    text: "删除后无法恢复！",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: '是的，删除！',
    cancelButtonText: '取消'
  }).then((result) => {
    if (result.isConfirmed) {
      $.ajax({
        method: 'POST',
        data: {'delete': true, 'blog_id' : blog_id },
        url: 'functions/blog_delete.php',
        success: function(data) {
          // 删除成功后刷新表格
          loadBlogTable();
          Swal.fire(
            '删除成功！',
            '你的博客已经被删除。',
            'success'
          )
        }
      });
    }
  })
}

额外优化建议 #

• 可以给blog_delete.php增加返回状态标识，比如删除成功返回success，失败返回fail，前端success回调中先判断返回结果再执行后续操作，避免出现数据库删除失败但前端提示成功的问题
• 你当前blog_list.php的表格表头只定义了2列，但tbody实际输出了3列（博客ID、标题、操作按钮），列数不匹配可能会导致表格样式错乱，建议补全表头列数

内容的提问来源于stack exchange，提问作者Andrywin Maquinto