每秒通过php mysql jQuery添加新行

我想将新的行添加到Div.List。一秒钟，而无需>删除或刷新最后一行或刷新 the page。我将如何实现这一目标？

这是我到目前为止的代码（只需将test2.php的内容替换为xx即可使其起作用）：

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        jQuery(function($){
  setInterval(function(){
    $.get( 'http://example.com/php/test2.php', function(newRowCount){
      $('#rowcounter').html( newRowCount );
    });
  },1000); //
});
    </script>
</head>
<body>
    <div id="log">
    </div>
    <p>There are <span id='rowcounter'>xx</span> rows in the DB.</p>
</body>
</html>

这是我页面中的代码：

<div class="list">
   <div>new row1</div>
   <div>new row2</div>
   <div>new row3</div>
   <div>new row4</div>
.
.
.
</div>

您可以将您想要的内容附加到没有删除的最后一行

的情况下

    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        jQuery(function($){
  setInterval(function(){
    $.get( 'http://example.com/php/test2.php', function(newRowCount){
      $('#rowcounter').append( newRowCount );
    });
  },1000); //
});
    </script>
</head>
<body>
    <div id="log">
    </div>
    <p>There are <span id='rowcounter'>xx</span> rows in the DB.</p>
</body>
</html>

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        setInterval(function(){
            $.ajax({
                url: "http://example.com/php/test2.php",
                type: "GET",
                data: {id : $('#list div').length},
                dataType: "html",
                success: function( data ) {
                    $('#list').append( data );
                    $('#rowcounter').html( $('#list div').length );
                }
            });
        },1000); 
    });
    </script>
</head>
<body>
    <div id="list">
    </div>
    <p>There are <span id="rowcounter">0</span> rows in the DB.</p>
</body>
</html>


<?php 
//Listing: http://example.com/php/test2.php
$id = isset($_GET['id'])?$_GET['id']:0;
echo '<div>new row'.$id.'</div>';
?>

相关内容

最新更新

热门标签：