php - 返回结果时如何在 AJAX div 中重新加载 MySQL 记录？

Question

我想知道如何重新加载 <div>使用 AJAX其中显示的内容是从 MySQL 检索到的记录database .棘手的部分是我想要 <div>显示每个结果 30 秒，然后重新加载以显示下一个结果。

这是 media table :

_______________________________________________
| FIELD 1 |  FIELD 2  |  FIELD 3  |  FIELD 4  |
-----------------------------------------------
|   ID    |   TVOne   |   TVTwo   |  Active   |
-----------------------------------------------
|   15    |   no      |     no    |    no     |
-----------------------------------------------
|   29    |   yes     |     no    |   yes     |
-----------------------------------------------
|   53    |    no     |     no    |    no     |
-----------------------------------------------
|   71    |   yes     |    yes    |    yes    |
-----------------------------------------------

在<div>位于 TVOne 的页面上，我希望它加载记录 29 和 71。在 <div> 中位于 TVTwo 的页面上，我希望它只加载记录 71。这 table由用户在后端修改，所以结果总是不同的。

我正在阅读 THIS QUESTION我相信javascript选择器 .eq()可能是拼图的一部分，但我不确定如何将它们组合在一起。

<div>所在的页面位于称为index4.php .上一页 ( index3.php ) 执行查询以查看是否有任何记录设置为事件状态，如果是，则设置 num_rows至 $count然后转到 index4.php?count=$count , 如果不是它回到显示序列的开头 index.php .

这里是 index3.php重定向功能:

<?php
$result = $mysqli->query("SELECT * FROM media WHERE Active = 1 AND TVTwo = 1");
$count = $result->num_rows;
if($count > 0){$media = "index4.php?count=$count";}
else{$media = "index.php";}
?>

<script>
refresh=window.setTimeout(function(){location.href="<?php echo $media;?>"},15000);
</script>

这是我的 AJAX加载 <div> 的代码:

<script>
function MediaQuery(qty)
    {
    if (qty=="")
        {
        document.getElementById("Media").innerHTML="";
        return;
        }
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("Media").innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","../process/QueryMedia.php?count="+qty,true);
    xmlhttp.send();
    }
</script>

这是 QueryMedia.php:

<?php
$count = $_GET["count"];

$sql = ("SELECT * FROM media WHERE Active = 1 AND TVTwo = 1 LIMIT $count");

if(!$result_sql = $mysqli->query($sql))
    {
    echo QueryCheck("getting the media records ","from the media",$mysqli);
    }

// fetch it here
?>

Answer 1

好的，我明白了。

1. index3.php 检查数据库以查看是否已将任何内容设置为“事件”(在本例中，它还检查以查看已将其设置为在哪个显示器上显示)。
2. 当它找到一条记录时，它通过$_GET 将变量$i(用作键并设置为最高结果)发送到index4。 php.
3. 当 index4.php 页面加载时，它会触发 function MediaQuery(i) 然后向 QueryMedia.php 请求基于数据库的记录在给定的 key 上。
4. 加载完 QueryMedia.php 结果后，i 键减 1，然后发送 function MediaQuery(i)短暂延迟后再次出现。
5. 一旦 i 键到达最后一个结果(始终为 0)，页面将重定向到 index 上显示序列的开始.php.

这是 index3.php:

<?php
$sql = $mysqli->query("SELECT * FROM media WHERE Media_Active = 1 AND Media_TVTwo = 1");
$count = $sql->num_rows;

if($count != 0)// If there are results returned then redirect to the media page.
    {
    $i = $count - 1;

    $media = "index4.php?i=$i";
    }
else // Else redirect to the first page.
    {
    $media = "index.php";
    }
?>

<script>
window.setTimeout(function(){location.href="<?php echo $media;?>"},20000);
</script>

这是 index4.php:

<script>
function MediaQuery(i)
    {
    if (i < 0)
        {
        window.setTimeout(function(){location.href="index.php"},0);
        return;
        }
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("Media").innerHTML=xmlhttp.responseText;
            var i = document.getElementById("i").innerHTML;
            var i = i-1;
            setTimeout(function() {MediaQuery(i)},20000);
            }
        }
    xmlhttp.open("GET","../process/QueryMedia.php?i="+i,true);
    xmlhttp.send();
    }
</script>

<body onload="MediaQuery(<?php echo $_GET['i'];?>)">

这是QueryMedia.php:

<?php
$i = $_GET["i"];

    $sql = ("SELECT * FROM media WHERE Media_Active = 1 AND Media_TVTwo = 1 ORDER BY Media_Name");

    if(!$result_sql = $mysqli->query($sql))
        {
        echo QueryCheck("getting the media records ","from the media",$mysqli);
        }

    $id = array();
    while($idquery = $result_sql->fetch_assoc())
        {
        $id[] = $idquery['Media_ID'];
        }

    $sql2 = ("SELECT * FROM media WHERE Media_ID = $id[$i]");

    if(!$result_sql2 = $mysqli->query($sql2))
        {
        echo QueryCheck("getting the media records ","from the media",$mysqli);
        }

    while($media = $result_sql2->fetch_assoc())
        {
        $img = $media['Media_Name'];
        $width = $media['Media_Width'];
        $height = $media['Media_Height'];
        $msg = $media['Media_Msg'];
        }
?>

<img src="../images/media/<?php echo $img; ?>" border="2" width="<?php echo $width; ?>px" height="<?php echo $height; ?>px">

<p align="center" class="f24" style="margin:5px"><?php echo $msg; ?></p>
<p id="i" style="display:none;"><?php echo $i; ?></p><!-- used to return the key value -->

我毫不怀疑这可能不是最有效的做事方式，有很多服务器请求在进行，我确信代码有点臃肿。如果有人想帮助我改进它，我将不胜感激。