Question

我想每秒向div.list添加一行新行，而不是删除或刷新最后一行或刷新页面。我将如何实现这一目标？

到目前为止，这是我的代码（只需将test2.php的内容替换为xx以使其正常工作）：

Calculate Vat   | Total Amount
----------------------------------
EXCLUDE_VAT     | 5.50
SUM_VAT         | 0.30
TOTAL_INCLUDE   | 5.80

这是我页面中的代码：

<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>

Answer 1

您可以在不删除最后一行的情况下将所需内容附加到列表中

    <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>

Answer 2

<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>';

?>

通过php mysql jquery每秒添加新行

2 个答案: