jQuery/Ajax更新数据库后详情区无刷新展示最新数据问题求解

核心解决思路 #

把详情数据拉取逻辑抽成可复用的公共函数，更新请求完成后直接传入当前id调用该函数即可刷新详情区域，不需要额外触发原表格按钮的点击事件。

具体实现步骤 #

1. 封装详情拉取公共函数

把原来表格按钮点击后的Ajax拉取、渲染逻辑抽成独立函数，接收id作为入参，两处逻辑都可以复用：

// 独立详情加载函数，传入id即可刷新详情区域内容
function loadDetailInfo(targetId) {
  $.ajax({
    url:"send_data_to_div.php",
    method:"POST",
    // 注意这里要传键值对格式，后端PHP才能正常接收参数
    data: {id: targetId},
    dataType: 'JSON'
  }).done( function(res) {
    // 原来的打开详情div、渲染数据的逻辑原封不动放在这里即可
    $('#detailedinfodiv').html(/* 你的渲染逻辑 */)
  });
}

2. 修改原表格按钮的点击逻辑，直接调用封装函数

$('#table').on('click', '.my_dynamic_id_from_a_button_in_a_table', function(e) {
    e.preventDefault();
    const currentId = $(this).attr("id"); 
    loadDetailInfo(currentId);
});

3. 修正更新按钮的事件绑定，更新完成后触发刷新

因为更新按钮是动态插入到页面的元素，直接用$('#button').on('click')绑定不会生效，需要用事件委托绑定到页面已存在的父级元素上，更新完成后直接调用详情加载函数即可刷新内容：

// 先给动态生成的更新按钮加统一类名update-btn，避免id冲突，然后用事件委托绑定
$(document).on('click', '.update-btn', function(e) {
    e.preventDefault();
    const currentId = $(this).attr("id"); 
    $.ajax({
        url:"update_the_div.php",
        method:"POST",
        data: {id: currentId},
        dataType: 'JSON'
    }).done( function(res) {
        // 更新成功后直接调用详情加载函数，传入当前id即可刷新内容
        loadDetailInfo(currentId);
    });
});

补充注意事项 #

• 你原有代码的Ajax data参数只传了id值，没有键名，后端PHP无法正常接收参数，必须改成{id: 对应值}的键值对格式
• 动态生成的元素不要用重复id，优先用类名绑定事件，避免id冲突导致事件不生效

内容的提问来源于stack exchange，提问作者adttmkb ttmkb