时间戳

首页 > 解决方案 > 我想用 Ajax 每隔几秒执行一次这个脚本而不重新加载页面

php - 我想用 Ajax 每隔几秒执行一次这个脚本而不重新加载页面

问题描述

我想使用 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/>";
}

标签： phpajax

解决方案

在基本形式中，您可以使用fetch

setInterval( ()=>{
    fetch( '/path/to/php/script.php' )
    .then( r=>{ 
        return r.text();
    })
    .then( data=>{
        alert( data );
    })
    .catch( err=>{
        alert(err);
    })
}, 1000 * 10 );// every 10s

如果您要使用如下实用程序函数来简化 DOM 节点的创建，您可以生成新内容，而无需一开始就尝试擦除文档。

来自 MDN：

注意：当 document.write 写入文档流时，在关闭（加载）的文档上调用 document.write 会自动调用 document.open，这将清除文档。

const create=function(t,a,p=null){
    let el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
    let _arr=['innerHTML','innerText','html','text'];
    for( let x in a ) if( a.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, a[ x ] );
    if( a.hasOwnProperty('innerHTML') || a.hasOwnProperty('html') ) el.innerHTML=a.innerHTML || a.html;
    if( a.hasOwnProperty('innerText') || a.hasOwnProperty('text') ) el.innerText=a.innerText || a.text;
    if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
    return el;
};

然后你可以像这样修改你的ajax函数（虽然未经测试）

setInterval( ()=>{
    fetch( 'chat-data.php' )
    .then( r=>{ 
        return r.text();
    })
    .then( data=>{
        /*
            Without seeing the HTML this is pseudo-code. Change to suit
            your HTML structure.
        */
        let parent=document.getElementById('TARGET_ELEMENT_ID');
        let record=create(null,{},parent);


        Object.keys( data ).map( key=>{
            let obj=data[ key ];

            create('span',{'class':'time-message','text':obj.when_send},record);
            create('label',{'class':'nick-message','text':obj.sender},record);
            create(null,{'text':obj.message},record);
            create('hr',{},record);
        })
    })
    .catch( err=>{
        alert(err);
    })
}, 1000 );

推荐阅读