我想在不重新加载页面的情况下使用 Ajax 每隔几秒执行一次此脚本

Question

我想使用 Javascript Ajax 每隔给定的秒数执行此脚本。（这个想法是避免重新加载页面）

这是脚本：

include("databaseCONNECTION.php");

$seconds=1;

$sql = "SELECT * FROM " . $dbDatabase .".chat";

$lines = [];

foreach($dbConnection->query($sql) as $row) {

    $line = '<span class="time-message">' . $row['when_send'] . '-' . '</span>';

    $line .= '<label class="nick-message"><strong>' . $row['sender'] . ': ' . '</strong></label>';

    //$lines[] = $line . ": " . $row['message'];

    echo $line . $row['message'] . "<br/><hr/>";

}

Answer 1

在基本形式中，您可以使用fetchsetInterval( ()=>{&nbsp; &nbsp; fetch( '/path/to/php/script.php' )&nbsp; &nbsp; .then( r=>{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return r.text();&nbsp; &nbsp; })&nbsp; &nbsp; .then( data=>{&nbsp; &nbsp; &nbsp; &nbsp; alert( data );&nbsp; &nbsp; })&nbsp; &nbsp; .catch( err=>{&nbsp; &nbsp; &nbsp; &nbsp; alert(err);&nbsp; &nbsp; })}, 1000 * 10 );// every 10s如果您要使用如下实用函数来简化 DOM 节点的创建，您可以生成新内容而无需最初尝试擦除文档。来自 MDN：注意：当 document.write 写入文档流时，在关闭（加载）的文档上调用 document.write 会自动调用 document.open，这将清除文档。const create=function(t,a,p=null){&nbsp; &nbsp; let el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );&nbsp; &nbsp; let _arr=['innerHTML','innerText','html','text'];&nbsp; &nbsp; for( let x in a ) if( a.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, a[ x ] );&nbsp; &nbsp; if( a.hasOwnProperty('innerHTML') || a.hasOwnProperty('html') ) el.innerHTML=a.innerHTML || a.html;&nbsp; &nbsp; if( a.hasOwnProperty('innerText') || a.hasOwnProperty('text') ) el.innerText=a.innerText || a.text;&nbsp; &nbsp; if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );&nbsp; &nbsp; return el;};然后你可以像这样修改你的 ajax 函数（虽然未经测试）setInterval( ()=>{&nbsp; &nbsp; fetch( 'chat-data.php' )&nbsp; &nbsp; .then( r=>{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return r.text();&nbsp; &nbsp; })&nbsp; &nbsp; .then( data=>{&nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Without seeing the HTML this is pseudo-code. Change to suit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; your HTML structure.&nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; let parent=document.getElementById('TARGET_ELEMENT_ID');&nbsp; &nbsp; &nbsp; &nbsp; let record=create(null,{},parent);&nbsp; &nbsp; &nbsp; &nbsp; Object.keys( data ).map( key=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let obj=data[ key ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; create('span',{'class':'time-message','text':obj.when_send},record);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; create('label',{'class':'nick-message','text':obj.sender},record);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; create(null,{'text':obj.message},record);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; create('hr',{},record);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; &nbsp; .catch( err=>{&nbsp; &nbsp; &nbsp; &nbsp; alert(err);&nbsp; &nbsp; })}, 1000 );

Answer 2

它每秒钟都会给我数据，但我无法在我的 div 中打印它...我尝试使用 json_encode，所以我重新访问了我的脚本：include("databaseCONNECTION.php");$data = array();foreach($dbConnection->query($sql) as $rows) {&nbsp;&nbsp; &nbsp; array_push($data, array("when_send" => $rows['when_send'], "sender" => $rows['sender'], "message" => $rows['message']));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}echo json_encode($data);?>// and this is my javascript script:<script language="javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setInterval( ()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fetch( 'chat-data.php' )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then( r=>{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return r.text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then( data=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i = 0; i < data.lenght; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.write('<span class="time-message">', data[i]['when_send'], '- </span>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.write('<label class="nick-message"><strong>', data[i]['sender'], ': </strong></label>', data[i]['message'], '<br/><hr/>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch( err=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(err);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000)</script>