如何通过jQuery获取HTML元素的实时Ajax更新数据？

嘿，我来帮你搞定这个实时数据获取的麻烦！你现在的代码只能拿到页面加载时的初始值，原因很简单——Ajax偷偷更新了.bar的内容，但你的代码没收到“通知”。下面给你几种靠谱的解决方案，按需选就行：

方法一：用MutationObserver监听元素变化（最推荐） #

这是现代浏览器原生支持的API，能精准捕捉元素的内容变化，比定时刷新高效太多，完全是“实时响应”。

// 先拿到目标元素
const targetBar = document.querySelector('.bar');

// 创建一个观察者实例，指定变化发生时要做的事
const contentObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 当元素的文本或子节点变化时，触发更新
    if (mutation.type === 'childList' || mutation.type === 'characterData') {
      const latestValue = targetBar.innerHTML;
      // 这里替换成你需要的操作，比如更新#other的内容
      $("#other").html(`<strong>${latestValue}</strong>`);
      // 测试用的alert也可以放在这里
    }
  });
});

// 配置观察规则：监听子节点变化、文本内容变化，包括子元素的文本
const observeConfig = { childList: true, characterData: true, subtree: true };

// 启动观察
contentObserver.observe(targetBar, observeConfig);

// 要是之后不需要监听了，记得调用这个停止：contentObserver.disconnect();

方法二：如果是你自己发起的Ajax请求，直接在回调里更新 #

如果这个Ajax请求是你自己写的代码触发的，那最简单的方式就是在请求成功的回调里，重新获取.bar的最新内容。毕竟你知道什么时候数据会更新，直接同步操作就行：

// 举个Ajax请求的例子，你可以对应改成自己的请求逻辑
$.ajax({
  url: '你的接口地址',
  method: 'GET',
  success: (response) => {
    // 这里假设你用返回的数据更新了.bar的内容
    $('.bar').html(response.data);
    
    // 紧接着就获取最新值并更新#other
    const latestValue = $('.bar').html();
    $("#other").html(`<strong>${latestValue}</strong>`);
  }
});

方法三：定时轮询（应急用，不推荐） #

要是上面两种方法都没法用（比如Ajax是第三方代码发起的，你改不了），可以用定时检查的方式。不过这种方法效率低，会浪费浏览器资源，尽量少用：

// 先记录初始值
let lastValue = $('.bar').html();

// 每隔500毫秒检查一次，间隔可以自己调
setInterval(() => {
  const currentValue = $('.bar').html();
  // 只有当值变化时才更新
  if (currentValue !== lastValue) {
    $("#other").html(`<strong>${currentValue}</strong>`);
    lastValue = currentValue; // 更新记录的旧值
  }
}, 500);

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