我想在不重新加载页面的情况下使用 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

在基本形式中，您可以使用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 );

Answer 2

它每秒钟都会给我数据，但我无法在我的 div 中打印它...我尝试使用 json_encode，所以我重新访问了我的脚本：

include("databaseCONNECTION.php");

$data = array();

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

    array_push($data, array("when_send" => $rows['when_send'], "sender" => $rows['sender'], "message" => $rows['message']));        

}

echo json_encode($data);

?>

// and this is my javascript script:

<script language="javascript">

                        setInterval( ()=>{

                            fetch( 'chat-data.php' )

                            .then( r=>{ 

                                return r.text();

                            })

                            .then( data=>{

                                for(i = 0; i < data.lenght; i++) {

                                    document.write('<span class="time-message">', data[i]['when_send'], '- </span>');

                                    document.write('<label class="nick-message"><strong>', data[i]['sender'], ': </strong></label>', data[i]['message'], '<br/><hr/>');

                                }

                            })

                            .catch( err=>{

                                alert(err);

                            })

                        }, 1000)

</script>