同じページ内でAjax処理した際にページ全体のhtmlが返ってしまう

Ajaxでサーバー側の処理を同一ページ内で行うように実装しています。

下記のコードでは、idxという変数をpostしてデータを取得、データを元にhtmlを生成して返す、という処理を行っています。（コードは色々省いて書いています）

期待するのは、ul#hogeの中身だけが、処理で生成された$return_htmlで書き変わることですが、結果はページ全体のHTMLがul#hogeの中に置き換わってしまい、見た目は同じページが二重にズレて表示されてしまいます。

console.log(data);で返ってきたHTMLを見ると、確かにページ全体（<!DOCTYPE html>から</html>）までが出力されてしまっています。

これを防ぐにはどうすればいいでしょうか？

<?php
  // $_POST['idx']を使ってデータ取得処理
  if (isset($_POST['idx'])) {
    $return_html = '<li>d</li><li>e</li><li>f</li>';
  }
  
  // Ajaxリクエストの場合のみ生成したhtmlを返す
  if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    header("Content-type: text/html; charset=UTF-8");
    echo $return_html;
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      $(function() {
        $.ajax({
          type: 'post',
          url:  './index.html',
          data: {idx: idx},
        }).done(function(data, textStatus, jqXHR){
          console.log(data);
          $('#hoge').html(data);
        }).fail(function(jqXHR, textStatus, errorThrown){
          
        });
      })
    </script>
  </head>
  <body>
    <ul id="hoge">
      <!-- 初期表示のhtml -->
      <li>a</li><li>b</li><li>c</li>
    </ul>
  </body>
</html>