定期更新页面上的信息而不刷新页面

时间:2013-12-29 20:00:10

标签: javascript php jquery mysql ajax

我的网站上有一个评论部分,我需要一种方法让它实时更新(或者每30秒左右)它从PHP获取来自mysql数据库的注释:

    <?php
                $link = mysql_connect('localhost', 'root', '');
                if (!$link) {
                    die('Could not connect: ' . mysql_error());

                }
                mysql_select_db('SJCE');
                $qu1 = mysql_query("SELECT `ID`,`contence`,`from`,`time`,`subject` FROM `***` WHERE `where` = 1 ORDER BY  `time` DESC LIMIT 0 , 30");
                $numr1 = mysql_num_rows($qu1);
                $i = 1;
                while($row=mysql_fetch_array($qu1)) {
                    $i++;
                    echo '
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-primary">
                                <div class="panel-heading panel-title h3">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <i class="fa fa-clock-o"></i> '.$row['3'].'
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            '.$row['4'].'
                                        </div>
                                        <div class="col-xs-4 text-right">
                                            <i class="fa fa-user"></i> '.$row['2'].'
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    '.$row['1'].'
                                </div>
                            </div>
                        </div>
                    </div>
                    ';
                }
            ?>

目前我使用一段JavaScript来刷新页面:

    <script type="text/javascript">
    timeout = setTimeout("location.reload(true);",5000);
function disable_ar(){
    clearTimeout(timeout);
}
function enable_ar(){
    timeout = setTimeout("location.reload(true);",5000);
}
</script>

这样可以使页面每隔5秒闪烁一次,有时会导致页面无法正常加载。

我需要一种方法来更新评论而不刷新整个页面。

谢谢。

P.S。我对javascript,ajax和jquery

知之甚少

1 个答案:

答案 0 :(得分:2)

加载jquery库:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后使用这样的ajax脚本(必须在加载jquery后调用)。

并使用间隔,而不是超时(仅运行一次)。

$(function(){

  window.setInterval(function(){
    loadLatestResults();
  }, 5000);

  function loadLatestResults(){

    $.ajax({
      url : '/load/from/this/url.php',
      cache : false,
      success : function(data){
        $('#id-of-element-into-which-results-are-loaded').html(data);
      }
    });
  }

});