如何在对应表格行中显示 AJAX 返回的数据

本文讲解如何通过 jquery 或原生 javascript 实现“点击某行按钮，仅在该行的指定单元格中显示数据”，避免全局覆盖，核心在于利用 dom 遍历（如 `.closest("tr")`）精准定位目标元素。

在你提供的代码中，问题根源在于 $('.data').html(id) 这一行——它会匹配页面中所有带有 class="data" 的元素，导致无论点击第几行按钮，结果都统一写入到第一行或全部行的 中，完全失去行级上下文。

✅ 正确做法是：从被点击的按钮出发，向上找到其所在的

行，再向下查找该行内唯一的 .data 元素，实现“作用域隔离”。

✅ 推荐方案一：jQuery（简洁可靠）

$('.getdata[data-id]').on('click', function() {
  const $btn = $(this);
  const id = $btn.data('id');

  $.get('log.php', { id: id }
)
    .done(function(response) {
      // 精准定位：当前按钮 → 所在行 → 行内 .data 元素
      $btn.closest('tr').find('.data').html(response || id);
    })
    .fail(function(xhr, status, error) {
      console.error('请求失败:', status, error);
      $btn.closest('tr').find('.data').html('❌ 加载失败');
    });
});

? 提示：使用 .data('id') 比 .attr('data-id') 更健壮（自动类型转换），且推荐用事件委托（.on()）替代 .click()，尤其适合动态添加的表格行。

✅ 推荐方案二：原生 JavaScript（无依赖，现代标准）

document.querySelector('table').addEventListener('click', async function(e) {
  const btn = e.target.closest('button.getdata[data-id]');
  if (!btn) return;

  const id = btn.dataset.id;
  const params = new URLSearchParams({ id });

  try {
    const res = await fetch(`log.php?${params}`);
    const data = await res.text();

    if (res.ok) {
      const targetCell = btn.closest('tr').querySelector('.data');
      if (targetCell) {
        targetCell.innerHTML = data || id;
      }
    } else {
      throw new Error(`HTTP ${res.status}`);
    }
  } catch (err) {
    console.error('数据加载异常:', err);
    const targetCell = btn.closest('tr').querySelector('.data');
    targetCell && (targetCell.innerHTML = '⚠️ 请求出错');
  }
});

⚠️ 注意事项

• 不要用全局选择器：$('.data') 是危险操作，必须结合上下文限定范围；
• 确保 HTML 结构合法： 应包裹在 内，且 中需用 或 包裹内容（你原代码中 action data 缺少 ，建议补全）；
• 服务端返回内容需安全处理：若 log.php 返回的是纯文本或 HTML 片段，直接 innerHTML 可能有 XSS 风险；如为结构化数据（JSON），请先 JSON.parse() 并手动渲染；
• 增强用户体验：可添加加载状态（如按钮禁用、显示 ...）、错误重试机制或骨架占位符。

通过以上任一方案，点击第 5 行按钮时，仅第 5 行的 会被更新，真正实现“数据按行显示”的预期效果。