jQuery的AJAX - 如何顯示每隔幾秒鐘其他結果同桌

Question

目前，我有靜態展示，wwhich顯示從表3箇中最後一個項目：

DB表：

id  |  question  |  answer 
------------------------------------------------- 
1   |   Q?   |  A? 
2   |   Q?   |  A? 
3   |   Q?   |  A? 
4   |   Q?   |  A? 
5   |   Q?   |  A? 
6   |   Q?   |  A? 

到目前爲止，我展示用PHP foreach，最後3個項目。

我想，它會動態地將顯示每一次每3項與漂亮的動畫，並會永遠循環下去。

我怎麼能與阿賈克斯還是什麼做呢？提前致謝。

EDIT（已刪除舊代碼）。

---

Bahaaldine Azarmi，在這裏我做了什麼：

我創建了一個名爲indexaskrefresh.php新的PHP文件，在PHP裏我插入下面的PHP代碼：

$query = "SELECT * FROM que limit " .$offset. "," .$pageSize ; 
mysql_query("SET NAMES 'utf8'"); 

$result = mysql_query($query, $func->connection); 

if(!$result) //ERROR IN YOUR SQL QUERY 
return false; 

if(mysql_num_rows($result)==0) //NO ROWS IN TABLE pages 
return false; 

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) // CHANGE THE RESULT TO 2 DIMMENSIONAL ARRAY 
{ 
    $returned_array[] = $row; 
} 

return $returned_array; 

2.接下來在我的索引文件中，我創建了一個名爲ask的新div，並在t他頁我創造了新的JavaScript代碼如下（的index.php）：

<script type="text/javascript"> 

// global vars 
var offset = 0; 
var pageSize = 3; 


function callMyPhpScript() { 
    var parameters = new Object(); 
    parameters.offset = offset; 
    parameters.pageSize = pageSize; 
    $.ajax("modules/indexaskrefresh.php", parameters) 
     .done(onDone) 
     .fail(onFail); 
} 


function onDone(data) { 
    // if no data was returned then you should reset the offset 
    if (data.length == 0) { 
     offset = 0; 
    } else { 
     $('#ask').empty.append(data).show('slow'); 
     // I assume here that data is well formed 
     // html code returned by you php script 
     offset += 3; 
    } 
} 


$(function() { 
// should be move in configuration ... 
var N = 5000 // Call will be made every 5 seconds. 
setInterval(callMyPhpScript,N); 
    }); 


</script> 

應包含的響應（在index.php內）的DIV：

<div id="ask" style="float:right;"> 
     <h2 style="margin-right:15px;"> כדאי לדעת :</h2> 
      <?php 
       $i = 0; 
        $len = count($que); 
        foreach($que as $key=>$value) 
        { 
         echo '<span style="color:blue;font-weight:bold;padding:5px;">'.$value['que'].'</span><br><span style="color:green;font-weight:bold;padding:5px;">'.$value['ans'].'</span>'; 

        if ($i == $len - 1) { 

         }else{ 
         echo '<hr style="margin-right:25px;">'; 
         } 

         $i++; 
        } 
      ?> 
      </div> 

什麼也沒有發生一樣，腳本不工作不張貼或沒有財產以後我不知道..

Answer 1

所以我想你想你想打電話給你的PHP函數每N秒，刷新了3項最後。

這裏是做的一個方法：

創建一個JavaScript功能，使通話和發送的偏移和頁面大小。 偏移將起始ID和頁面大小的限制在你的SQL查詢：

// global vars 
var offset = 0; 
var pageSize = 3; 


function callMyPhpScript() { 
    var parameters = new Object(); 
    parameters.offset = offset; 
    parameters.pageSize = pageSize; 
    $.ajax("http://myhost:myport/pathToMyPhpFunction", parameters) 
     .done(onDone) 
     .fail(onFail); 
} 

在你的PHP腳本，你應該得到的解析參數，並用它在你的SQL查詢是這樣的：

$query = "SELECT * FROM que limit " .$offset. "," .$pageSize ; 
// That will return records from offset+1 to pageSize 

落實onDone功能結果某處附加在你的HTML代碼

function onDone(data) { 
    // if no data was returned then you should reset the offset 
    if (data.length == 0) { 
     offset = 0; 
    } else { 
     $('#myContainer').empty.append(data).show('slow'); 
     // I assume here that data is well formed 
     // html code returned by you php script 
     offset += 3; 
    } 
} 

然後在你的html代碼，當加載頁面時，調用集超時功能 使每N秒呼叫：

$(function() { 
    // should be move in configuration ... 
    var N = 5000 // Call will be made every 5 seconds. 
    setInterval(callMyPhpScript,N); 
}); 

如果你想奇特的效果，我推薦使用Animate.css