1

ウェブページが開くたびにランダムに変化する小さなセクションをウェブページに作成しています。コードは次のようになります。

<div id ="quote-text">
    <?php
    mysql_connect("localhost", "xxxxxxx", "xxxxxxx") or die(mysql_error());
    mysql_select_db("xxxxxxx") or die(mysql_error());
    $result = mysql_query("SELECT * FROM quotes WHERE approved=1 ORDER BY RAND () LIMIT 1") 
    or die(mysql_error()); 
    while($row = mysql_fetch_array( $result )) {
        echo "<img src=http://www.xxxxxxxxxx.com/images/".$row['image'] ." width=280px ><br>";
        echo '<span class="style2">'.$row['quote'].'</span class>';
        echo "<tr><td><br>";
        echo "<tr><td>";
    } 
    echo "</table>";
    ?>
</div>

ページ全体を更新せずにランダムに 5 秒ごとにこの変更を行うにはどうすればよいですか?

ありがとうございました

4

3 に答える 3

2

最も最適化されたソリューションは、PHP と javascript/Jquery の両方を利用するソリューションを使用することだと思います。

まず、5秒ごとにPHPスクリプトへのAJAX呼び出しを行うことは避けます..

代わりに、X 分ごとに 1 つの呼び出しを行い、12X 画像のセットを取得できます。

次に、javascript を使用setIntervalして、クライアントに画像を変更させます。

途中で、PHP スクリプトをもう一度呼び出して、一連の画像に新しい要素を追加したり、以前の要素を削除したりできます。

このようなアプローチは、クライアント側とサーバー側の両方のオーバーヘッドを削減します。

更新：このメソッドの大まかな実装の下

Javascript:

<?php
if(isset($_GET['getBanners']))
{
    header('Content-Type: application/json');
    mysql_connect("localhost", "root", "") or die(mysql_error());
    mysql_select_db("stackoverflow2") or die(mysql_error());

    $json_rows = array();

    $result = mysql_query("SELECT * FROM quotes WHERE approved=1   ORDER BY RAND ()  LIMIT 12;") 

    or die(mysql_error()); 
    $element = 0;
    while($row = mysql_fetch_array( $result )) {
        $json_rows[$element] = $row['image'];
        $element++;
    } 

    print '{"dataVal":'.json_encode($json_rows).'}';
    return;
}
?>
<html>
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
//alert('test1');
var randomBanners = new Array ( );
var currentBannerIndex = 0;

function readNewBanners(startElement, numElements)
{
    $.getJSON('http://127.0.0.1/stackoverflow/Banner.php?getBanners=1', function(data) {
            for (var i = startElement; i < data.dataVal.length && i<startElement + numElements ; i++) {
            randomBanners[i] = data.dataVal[i];
            }           
    });
}

function refreshBannerImage()
{
    if(document.getElementById('banner') == undefined) return;
    document.getElementById('banner').innerHTML = ("<img src='"+randomBanners[currentBannerIndex]+"'/>");
    currentBannerIndex = (currentBannerIndex+1)%12;
}

$( document ).ready(function() {
    readNewBanners(0, 12);
    setInterval(function() {
          readNewBanners(0, 12);
    }, 60000);
     setInterval(function() {
          refreshBannerImage();
    }, 500);
});
</script>

</head>
<body>

<div id="banner">
Banner Here
</div>

</body>
</html>

SQL:

   create table quotes
    (
    image varchar(10),
    approved int
    );

    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=1',1);
    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=2',1);
    insert into quotes values ('http://dummyimage.com/600x400/000/fff&text=3',1);
    etc...
于 2013-06-19T22:05:15.343 に答える