Question

我在网页上创建了一个小部分，每次网页打开时都会随机更改。代码看起来像这样。

<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秒随机进行一次更改吗？

谢谢

Answer 1

您需要进行AJAX调用才能更改页面上的内容而无需刷新。

在此查看W3Schools教程：http://www.w3schools.com/ajax/ajax_intro.asp

甚至更好地使用mozilla教程：

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Answer 2

我认为最优化的解决方案是使用兼容PHP和javascript / Jquery的解决方案。

首先，我会避免每隔5秒对PHP脚本进行一次AJAX调用..

相反，您可以每隔X分钟拨打一个电话并获得一组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...

Answer 3

你需要使用AJAX。我建议你使用jQuery或类似的框架。以下是您想要的How to update a specific div with ajax and jquery的一个很好的例子。添加一个setInterval（）调用，就像在这篇文章http://forum.jquery.com/topic/jquery-setinterval-function中一样，你就完成了。

如何使我的随机MySQL查询每5秒自动刷新一次

3 个答案:

更新：此方法的粗略实现