如何在通过AJAX加载PHP文件到DIV前显示加载器？

没问题，这其实是个非常常见的前端交互需求，我来给你一步步拆解实现方法，结合你已经有的jQuery和HTML基础，很快就能搞定：

1. 先准备HTML结构 #

你需要三个核心部分：用来承载PHP内容的目标DIV、加载器元素（初始隐藏），以及触发加载的交互元素（比如按钮，也可以是页面加载自动触发）：

<!-- 目标容器：最终显示PHP加载内容的地方 -->
<div id="content-container"></div>

<!-- 加载器：初始隐藏，加载过程中显示 -->
<div id="loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; background:#fff; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">
  <img src="loader.gif" alt="加载中"> <!-- 可以用动画GIF，也直接写文字 -->
</div>

<!-- 触发加载的按钮（可选，也可以页面加载时自动执行） -->
<button id="load-content-btn">加载PHP内容</button>

2. 编写jQuery逻辑 #

核心思路是：触发加载时先显示加载器，调用.load()方法加载PHP，等请求完成（成功/失败）后隐藏加载器：

$(document).ready(function() {
  // 绑定按钮点击事件（如果要页面加载自动加载，直接把下面的逻辑放这里就行）
  $('#load-content-btn').click(function() {
    // 1. 显示加载器
    $('#loader').show();
    
    // 2. 清空目标容器（可选，避免旧内容残留）
    $('#content-container').empty();
    
    // 3. 使用.load()加载PHP文件到目标容器
    $('#content-container').load('your-target-file.php', function(response, status, xhr) {
      // 4. 不管成功失败，加载完成后隐藏加载器
      $('#loader').hide();
      
      // 可选：处理加载失败的情况，给用户提示
      if (status === "error") {
        $('#content-container').html(`加载失败：${xhr.status} - ${xhr.statusText}`);
      }
    });
  });
});

几个关键注意点 #

• 路径正确性：确保your-target-file.php的路径是正确的，和当前页面在同一域名下（否则会有跨域问题）
• 加载器样式自定义：你可以把加载器改成任何你想要的样式，比如用旋转动画、自定义GIF，只要保证初始是隐藏状态就行
• 自动加载场景：如果不需要按钮触发，直接把点击事件里的逻辑放在$(document).ready()里，页面一加载就自动执行加载流程

这样就能完美实现你要的效果：加载前显示加载器，PHP内容加载完成后自动隐藏加载器并展示内容啦～

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