如何从index.html向data.php发起AJAX调用以获取表格结果？

没问题，既然你的data.php已经能正常输出表格HTML了，咱们只需要在index.html里用AJAX请求这个文件，把返回的表格插入到页面指定位置就行。下面给你两种常用的实现方式：

方法一：原生JavaScript（无需依赖库） #

首先在你的index.html里准备一个用来放表格的容器：

<!-- index.html里的容器，表格会插入到这里 -->
<div id="apartment-table-container"></div>

<script>
// 原生Fetch API实现（现代浏览器推荐）
document.addEventListener('DOMContentLoaded', function() {
  // 获取容器元素
  const tableContainer = document.getElementById('apartment-table-container');
  
  // 先显示加载状态（可选但友好）
  tableContainer.innerHTML = '<p>加载中...</p>';

  // 发起请求到data.php
  fetch('data.php')
    .then(response => {
      if (!response.ok) {
        throw new Error('请求失败，状态码：' + response.status);
      }
      return response.text(); // 因为data.php返回的是HTML文本，所以用text()
    })
    .then(tableHtml => {
      // 将返回的表格HTML插入到容器中
      tableContainer.innerHTML = tableHtml;
    })
    .catch(error => {
      // 处理错误情况
      tableContainer.innerHTML = `<p>加载表格失败：${error.message}</p>`;
      console.error('AJAX请求错误：', error);
    });
});
</script>

如果需要兼容IE这类旧浏览器，可以用XMLHttpRequest替代Fetch：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const tableContainer = document.getElementById('apartment-table-container');
  tableContainer.innerHTML = '<p>加载中...</p>';

  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.php', true);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      tableContainer.innerHTML = xhr.responseText;
    } else {
      tableContainer.innerHTML = `<p>请求失败，状态码：${xhr.status}</p>`;
    }
  };
  
  xhr.onerror = function() {
    tableContainer.innerHTML = '<p>网络错误，无法加载表格</p>';
  };
  
  xhr.send();
});
</script>

方法二：jQuery实现（代码更简洁） #

如果你已经引入了jQuery库，代码会更短：

<!-- 先确保引入了jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<div id="apartment-table-container"></div>

<script>
$(document).ready(function() {
  const $container = $('#apartment-table-container');
  $container.html('<p>加载中...</p>');

  // 发起GET请求
  $.get('data.php')
    .done(function(tableHtml) {
      $container.html(tableHtml);
    })
    .fail(function(jqXHR, textStatus) {
      $container.html(`<p>加载失败：${textStatus}</p>`);
      console.error('请求错误：', jqXHR);
    });
});
</script>

注意事项 #

• 确保index.html和data.php在同一个域名/端口下，否则会触发浏览器的跨域安全限制（如果确实需要跨域，得在data.php里配置CORS头）
• 可以给表格添加一些CSS样式，让它看起来更美观
• 如果data.php需要接收参数（比如筛选条件），只需要在AJAX请求里加上参数即可（比如fetch('data.php?param=value')或者jQuery的$.get('data.php', {param: 'value'})）

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