AJAX 刷新 - 从数据库中复制已加载的数据

Question

在我一直在处理的当前页面上，我已将代码设置为可以用作实时博客/更新类型的系统。问题是，我在我的 PHP 中从我的数据库中加载内容，然后我有 AJAX，它链接到另一个文件，该文件将获取数据库内容并刷新它包含在我网站上的区域。

这意味着它将每 15000 毫秒自动更新一次数据库中的数据。问题是，它已经加载了现有数据。所以无论如何。每 15000 毫秒它会刷新该 div，因此页面上已经存在的数据将被复制。

更清晰的要点表格

• PHP 查询数据库，回显数据。
• AJAX 每 15000 毫秒检查另一个 php 页面并将其回显到第一页。
• 它不只是发布新内容，而是简单地复制原始内容。 （可以有两个帖子，甚至三个帖子。似乎有所不同）

我只是真正进入 PHP，我没有花太多时间在它上面，而且我对 AJAX 的了解是不存在的，所以这样做会出现问题。我尝试搜索如何仅在第一页回显现有数据，即使第二页正在处理更新。

这里是代码但是，如果它是混乱的，或者做正确的事情，对不起。我还在学习这门语言。

首页 matchdayupdates.php?id=（本例中 id 为 6）

$id = $_GET['id'];
  
 if(isset($_GET['id'])) {
 
    $requestMatchInformation = mysqli_query($connect, "SELECT * FROM matchinfo WHERE pageid='$id' LIMIT 500");
    while ($row = mysqli_fetch_assoc($requestMatchInformation)) {
        $pageid = $row['pageid'];
        $type = $row['type'];
        $postheader = $row['postheader'];
        $postcontent = $row['postcontent'];
        $posttime = $row['posttime'];
        echo "<div class='center-match-container'>
            <div class='match-information'>
                <div class='post-container'>
                    <div class='post-left'>
                        <img class='post-type-icon' src='images/icons/$type' />
                    </div>
                    <div class='post-right'>
                        <h3 class='header-top'>$postheader</h3>
                        <span class='time-red-right'>$posttime</span>
                        <br />
                            <br />
                        <p class='post-content'>$postcontent</p>
                    </div>
                </div>
            </div>
          </div>";        
    }
    
    $requestEventsInformation = mysqli_query($connect, "SELECT * FROM events WHERE id='$id'");
    while($row = mysqli_fetch_assoc($requestEventsInformation)) {
        $opponent = $row['opponent'];
        $datetime = $row['datetime'];
        $datetimedisplay = $row['datetimedisplay'];
        $location = $row['location'];
        $datepassed = $row['datepassed'];
        $rowonescore = $row['rowonescore'];
        $rowtwoscore = $row['rowtwoscore'];
        $rowoneplayers = $row['rowoneplayers'];
        $rowtwoplayers = $row['rowtwoplayers']; 
    }
    
 }
 else {
 
 }
 
 if(!$requestEventsInformation && !$requestMatchInformation) {
    echo '<div class="match-notice"><h4>There are currently no updates, this page will auto-update when there are new updates.</h4></div>';
 }
 
 echo $id;
 ?>
 <script>
     var auto_refresh = setInterval(function () {
         $('.center-match-container').fadeOut('slow', function() {
             $(this).load('/esports/match/matchinforequest.php?id=<?php echo $id; ?>', function() {
                 $(this).fadeIn('slow');
             });
         });
         $.ajaxSetup({ cache: true });
     }, 15000);
 </script>

第二页 matchinforequest.php?id=(同样这个 id 是 6)

$id = $_GET['id'];

if(isset($_GET['id'])) {

    $requestMatchInformation = mysqli_query($connect, "SELECT * FROM matchinfo WHERE pageid='$id' LIMIT 500");
    while ($row = mysqli_fetch_assoc($requestMatchInformation)) {
        $pageid = $row['pageid'];
        $type = $row['type'];
        $postheader = $row['postheader'];
        $postcontent = $row['postcontent'];
        $posttime = $row['posttime'];
        echo "<div class='center-match-container'>
            <div class='match-information'>
                <div class='post-container'>
                    <div class='post-left'>
                        <img class='post-type-icon' src='images/icons/$type' />
                    </div>
                    <div class='post-right'>
                        <h3 class='header-top'>$postheader</h3>
                        <span class='time-red-right'>$posttime</span>
                        <br />
                            <br />
                        <p class='post-content'>$postcontent</p>
                    </div>
                </div>
            </div>
          </div>";
    }

    $requestEventsInformation = mysqli_query($connect, "SELECT * FROM events WHERE id='$id'");
    while($row = mysqli_fetch_assoc($requestEventsInformation)) {
        $opponent = $row['opponent'];
        $datetime = $row['datetime'];
        $datetimedisplay = $row['datetimedisplay'];
        $location = $row['location'];
        $datepassed = $row['datepassed'];
        $rowonescore = $row['rowonescore'];
        $rowtwoscore = $row['rowtwoscore'];
        $rowoneplayers = $row['rowoneplayers'];
        $rowtwoplayers = $row['rowtwoplayers'];
    }
    echo "Received Data";
}
else {
}

Answer 1

问题是您正在将新数据加载到任何具有类center-match-container 的HTML 元素中，但是您使用AJAX 获得的新数据还包含一个具有类center-match-container 的元素，因此第二次调用将其加载到两个地方等等。

在matchinforequest.php 中删除<div class='center-match-container'> 和相应的</div>，它应该可以工作。

附带说明，您没有使用准备好的语句，而是将 $_GET['id'] 的内容直接放入数据库查询中。这意味着有人可以通过将id 设置为0'; DELETE FROM matchinfo; ' 之类的值来轻松擦除您的数据库。请查看准备好的语句http://php.net/manual/en/mysqli.prepare.php 并更新您的代码以避免这种安全风险！