Ajaxを使ってMySQLの更新をHTML側で自動更新 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

$(“”).empty();で、一旦データを空にして、setTimeout、countupで自動更新します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Ajax</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    // setTimeout関数で2秒ごとに取得
    var countup = function(){
    $("#content").empty();
    $(document).ready(function(){
      // /**
      // * Ajax通信メソッド
      // * @param type
      // * @param url
      // * @param dataType
      // ** /
      $.ajax({
      type: "POST",
      url: 'json.php',
      dataType: "json",

      success: function(data, dataType)
      {
        if(data == null) alert('データが0件でした');

        var $content = $('#content');
        for (var i = 0; i<data.length; i++)
        {
          $content.append("<li>" + data[i].name + "</li>");
        }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert('Error : ' + errorThrown);
      }
    });
  });
    setTimeout(countup, 2000);
  }
  countup();
    </script>
  </head>
  <body>
    <h1>sample</h1>
    <ul id="content"></ul>
  </body>
</html>