document.getElementById仅首次生效求助：Ajax请求后无法更新页面内容

页面首次加载时内容显示正常，但切换Select选项后，Ajax请求返回成功，但document.getElementById().innerHTML无法更新页面内容。

原代码（用户提供） #

PHP文件代码 #

<?php

function getSelectionInfo($id)
{
  switch ($id) {
    case '1'  :
        $selectioninfo = "Title #1";            break;
    case '2'  :
        $selectioninfo = "Title #2";            break;    
    case '3'  :
        $selectioninfo = "Title #3";            break;
    case '4'  :
        $selectioninfo = "Title #4";            break;
    case '5'  :
        $selectioninfo = "Title #5";            break;
    }

echo <<<_END
    <script>
      document.getElementById('selectioninfo').innerHTML = "$selectioninfo";
    </script>
_END;

  return;
}

if (isset($_POST['id'])) {
  $id  = $_POST['id'];
}
else {
  $id  = 2;
}

echo <<<_END
<script src = 'js/jquery.min.js'></script>

<!doctype html>
<html>
  <body>
    <div>
      <select name = 'selectionbox' id = 'selectionbox' size = 5
        onChange = "loadSelection(this.value);">
_END;
      for ($J = 1; ($J <= 5); ++$J) {
          $recid  = $J;
          $title  = 'Selection ' . $J;

          echo $recid == 2?
          "<option selected = 'selected' value = '$recid'> $title 
          </option>":
          "<option value = '$recid'> $title 
          </option>";
        }
echo <<<_END
      </select>
    </div>
    <br>
    <div id = 'selectioninfo' >
    </div>
  </body>
</html>

_END;

  getSelectionInfo($id);

echo <<<_END

<script>
function loadSelection(val)
{
  $.ajax({
    type: "POST", 
    data: {"id": val},
  });
}
</script>

_END;

渲染后的页面代码 #

</head><body>
    <div>
      <select name="selectionbox" id="selectionbox" size="5" onchange="loadSelection(this.value);"><option value="1"> Selection 1 
          </option><option selected="selected" value="2"> Selection 2 
          </option><option value="3"> Selection 3 
          </option><option value="4"> Selection 4 
          </option><option value="5"> Selection 5 
          </option>      </select>
    </div>
    <br>
    <div id="selectioninfo">Title #2</div>
  

    <script>
      document.getElementById('selectioninfo').innerHTML = "Title #2";
    </script>
<script>
function loadSelection(val)
{
  $.ajax({
    type: "POST", 
    data: {"id": val},
  });
}
</script>
</body>

问题原因 #

1. Ajax未处理返回结果：原Ajax请求没有指定success回调，即使PHP返回了带脚本的内容，也不会自动执行或更新DOM。
2. PHP返回内容错误：Ajax请求时，PHP仍会输出整个页面的HTML和脚本，而非仅需要的更新数据，导致返回内容冗余且无法直接使用。
3. 页面结构不规范：脚本标签放在</body>之后，不符合HTML规范，可能导致脚本执行异常。

修复方案与完整代码 #

修改思路 #

• 区分首次加载和Ajax请求：Ajax请求时仅返回纯文本内容，不输出整个页面。
• 给Ajax添加success回调，手动用返回的数据更新DOM。
• 修正页面结构，规范脚本放置位置。

修改后完整代码 #

<?php
function getSelectionInfo($id) {
    switch ($id) {
        case '1': $selectioninfo = "Title #1"; break;
        case '2': $selectioninfo = "Title #2"; break;
        case '3': $selectioninfo = "Title #3"; break;
        case '4': $selectioninfo = "Title #4"; break;
        case '5': $selectioninfo = "Title #5"; break;
        default: $selectioninfo = "Unknown Title";
    }
    return $selectioninfo;
}

// 判断是否为Ajax请求
$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';

if ($isAjax && isset($_POST['id'])) {
    // Ajax请求：仅返回需要的文本内容
    echo getSelectionInfo($_POST['id']);
    exit; // 终止后续输出，避免返回整个页面
}

// 首次加载：输出完整页面
$defaultId = 2;
?>
<!doctype html>
<html>
<head>
    <script src='js/jquery.min.js'></script>
</head>
<body>
    <div>
        <select name='selectionbox' id='selectionbox' size="5" onchange="loadSelection(this.value);">
            <?php for ($J = 1; $J <= 5; $J++): ?>
                <option value="<?= $J ?>" <?= $J == $defaultId ? 'selected' : '' ?>>Selection <?= $J ?></option>
            <?php endfor; ?>
        </select>
    </div>
    <br>
    <div id='selectioninfo'><?= getSelectionInfo($defaultId) ?></div>

    <script>
        function loadSelection(val) {
            $.ajax({
                type: "POST",
                url: window.location.href, // 请求当前页面
                data: {"id": val},
                success: function(response) {
                    // 直接用返回的文本更新DOM
                    document.getElementById('selectioninfo').innerHTML = response;
                },
                error: function(xhr) {
                    console.error('请求出错:', xhr.statusText);
                }
            });
        }
    </script>
</body>
</html>

关键修改点说明 #

• Ajax请求判断：通过HTTP_X_REQUESTED_WITH头判断是否为Ajax请求，此时仅返回纯文本内容，避免输出整个页面。
• Ajax回调处理：新增success函数，接收PHP返回的文本后直接更新selectioninfo的内容。
• 页面结构优化：将jQuery脚本移到<head>，业务脚本放在<body>末尾，确保DOM加载完成后脚本能正常执行。
• 简化代码逻辑：使用PHP短标签<?= ?>简化HTML输出，去掉冗余的HEREDOC语法，代码更易读。

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