AJAX无法加载my-page.php内容，需默认展示选中项问题求助

我看了你的代码，发现几个导致AJAX无法正确获取内容以及默认初始化显示异常的问题，下面一步步帮你修复：

问题分析 #

• 内容重复追加：原代码每次AJAX成功后直接用append添加内容，会导致容器里堆积多个内容块，不是替换更新
• 初始化触发的逻辑隐患：虽然调用了.change()触发初始加载，但DOM操作顺序可能导致第一次显示异常
• 加载状态元素未默认隐藏：页面初始化时加载提示会直接显示，影响体验
• 缺少错误处理：如果AJAX请求失败，加载状态会一直停留在页面上

修复后的前端代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var $loading = $('#loading');
  var $loadText = $('#load');
  var $content = $("#content");
  var $select = $("#select123");

  // 封装加载逻辑，方便复用
  function loadTargetContent(selectedValue) {
    // 显示加载状态
    $loading.fadeIn();
    $loadText.fadeIn();
    
    $content.fadeOut(500, function() {
      $.ajax({
        url: 'my-page.php',
        type: 'GET',
        cache: false,
        success: function(html) {
          // 从返回的页面中筛选目标元素
          var $target = $(html).find('#' + selectedValue);
          
          // 隐藏加载状态，更新内容
          $loading.fadeOut();
          $loadText.fadeOut();
          $content.empty().append($target).fadeIn();
        },
        error: function() {
          // 请求失败时的处理
          $loading.fadeOut();
          $loadText.fadeOut();
          $content.empty().text('加载失败，请刷新重试').fadeIn();
        }
      });
    });
  }

  // 绑定下拉框切换事件
  $select.on('change', function() {
    loadTargetContent(this.value);
  });

  // 页面初始化时加载默认选中的内容
  loadTargetContent($select.val());
});
</script>

<select id="select123">
  <option value="content1" selected>content1</option>
  <option value="content2">content2</option>
  <option value="content3">content3</option>
  <option value="content4">content4</option>
</select>
<div id="content"></div>
<div id="progressbar">
  <span id="loading" style="display:none;"></span>
  <div id="load" style="display:none;">loading...</div>
</div>

可选优化：精简后端返回内容（推荐） #

原后端返回整个页面有点冗余，你可以修改my-page.php，让它只返回需要的内容块，减少请求体积：

<?php
// 获取前端传递的目标ID，默认返回content1
$targetId = isset($_GET['target']) ? $_GET['target'] : 'content1';
// 白名单校验，防止恶意请求
$allowedTargets = ['content1', 'content2', 'content3', 'content4'];
if (!in_array($targetId, $allowedTargets)) {
  $targetId = 'content1';
}
?>
<div id="<?php echo $targetId; ?>" class="content123">
  <?php
  switch($targetId) {
    case 'content1':
      echo 'text defult show';
      break;
    case 'content2':
      echo 'contentttttttt';
      break;
    case 'content3':
      echo 'content3';
      break;
    case 'content4':
      echo 'content4';
      break;
  }
  ?>
</div>

如果用这个优化版后端，记得把前端AJAX里加上data: { target: selectedValue }，这样后端就能直接返回对应内容，不用再筛选整个页面了。

关键修复点说明 #

1. 替换而非追加内容：用$content.empty().append($target)确保每次切换都是更新容器内容，不会堆积
2. 显式初始化加载：直接调用加载函数传入默认值，比触发change事件更可靠
3. 默认隐藏加载元素：给加载提示加上display:none，避免页面刚加载就显示加载状态
4. 添加错误处理：网络异常时能及时提示用户，同时隐藏加载状态

这样修改后，你的页面就能在初始化时默认显示content1的内容，切换下拉选项时也能正确通过AJAX获取并展示对应内容了。

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