Question

当我点击LINKS时，我正在使用AJAX从mysql数据库加载内容。

成功加载内容后，我每隔5秒刷新一次容器，以便显示新内容。

内容加载正常，刷新部分也可以正常工作。

但我遇到的问题是，当刷新发生时，加载的内容会丢失。

通过“它迷路了”我的意思是它将显示来自mysql数据库的最后结果。

所以，为了帮助您了解情况，我将进一步解释：

假设我将 3 结果存储在mysql数据库中。

我使用PHP从mysql中的每个结果创建<a></a>。我这样做没有任何问题。

我点击链接2.（工作正常）
链接2的内容将使用AJAX加载到页面上。（工作正常）
内容容器将每5秒刷新一次。（工作正常）
（这就是问题出现的地方）一旦刷新发生，即使我没有点击链接3，也会显示链接3的内容！

所以基本上，由于一些奇怪的原因，最后一个链接或最后一个mysql结果的内容将始终显示，这是不想要的。我需要加载CLICKED链接的内容并使其保持不变直到单击另一个链接。

我希望我没有让你困惑。：）

这是我的HTML代码：

    <div id="chattercontent" style="width:90%; height:150px; resize:none; border:solid 1px #ccc; background:#F2EDF0; overflow:scroll; text-align:left;"></div>



    <script type="text/javascript">
    $(document).ready(function () {

        function load() {
            $.ajax({ //create an ajax request to load_page.php
                type: "GET",
                url: "file.php?u_id=<?php echo $u_id; ?>",
                dataType: "html", //expect html to be returned                
                success: function (response) {
                    $("#chattercontent").html(response);
                    setTimeout(load, 5000)
                }
            });
        }

        load();
    });
    </script>

<script type="text/javascript">
$(document).ready(function () { 
    $(".list-group-item").click(function(e) {
    e.preventDefault();   
    $("#chattercontent").load(this.href);

    return false;
});
});
</script>

和链接的PHP代码：

   while (mysqli_stmt_fetch($stmt)) {
       $product_list .= "<a id='listc'  class='list-group-item' href='file.php?u_id=".$u_id."' >".$u_id."&nbsp;&nbsp;".$date_added."&nbsp;&nbsp;&nbsp;<img src='light-red-flash.gif' width='20' /></a>";
   }
}

任何帮助将不胜感激。

由于

编辑：

这是file.php的代码

<?php 
session_start();
if (isset($_GET['u_id'])) {

$u_id = $_GET['u_id'];  


   $sql = "SELECT * FROM chat WHERE u_id='$u_id' ";
    $query = mysqli_query($db_conx, $sql);
    $productCount = mysqli_num_rows($query); // count the output amount
    if ($productCount > 0) {
        while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){  

             $user_message = $row["user_message"];
        }
    } else {
        echo "Sorry, there was an error.";
        exit();
    }
echo $user_message;
}
?>

正如我前面提到的，file.php根据点击的链接正确返回结果，但是每次刷新后它会在最后一个结果上JUMP！

Answer 1

您没有使用javascript函数加载动态内容。请查看以下内容，希望它能解决您的问题。

function load(href) {
      $.ajax({ //create an ajax request to load_page.php
          type: "GET",
          url: href,
          //url: "file.php?u_id=<?php echo $u_id; ?>", <-- NON DYNAMIC CONTENT
          dataType: "html", //expect html to be returned                
          success: function (response) {
              $("#chattercontent").html(response);
              setTimeout(function() {
                  load(href);
              }, 5000)
          }
      });
  }

  var _currentUrl;

function load(href) {
    if (!href) {
      href = _currentUrl;
    }
    $.ajax({ //create an ajax request to load_page.php
        type: "GET",
        url: href,
        //url: "file.php?u_id=<?php echo $u_id; ?>", <-- NON DYNAMIC CONTENT
        dataType: "html", //expect html to be returned                
        success: function (response) {
            $("#chattercontent").html(response);
            setTimeout(load, 5000)
        }
    });
    _currentUrl = href;
  }

Answer 2

我有点困惑。如果你能用一些例子解释一下，我会很高兴的。无论如何，从我的文本中可以得到的是，之前的结果被覆盖了。为了阻止这种情况，正如我们在制作聊天框时所做的那样，您需要在＆＃34;之后添加响应＆＃34;以前的结果如 -

<script type="text/javascript">
    /* A variable to hold the last response */
    var lastResponse = "";

    $(document).ready(function () {

        function load() {
            $.ajax({ //create an ajax request to load_page.php
                type: "GET",
                url: "file.php?u_id=<?php echo $u_id; ?>",
                dataType: "html", //expect html to be returned                
                success: function (response) {
                    /* Check if it is the same response or not */
                    if (lastResponse != response)
                    {
                         /* Save the last response */
                         lastResponse = response;

                         /* Add content after the previous */
                         $("#chattercontent").html($("#chattercontent").html()+response);
                    }
                    setTimeout(load, 5000)
                }
            });
        }

        load();
    });
</script>

Answer 3

您需要跟踪用户选择的当前网址：

$(document).ready(function () {
    //set url 1st time
    var currentUrl = "file.php?u_id=<?php echo $u_id; ?>";
    //variable to reference the timeout
    var timer;
    function load(url) {
        $.ajax({ //create an ajax request to load_page.php
            type: "GET",
            url: url,
            dataType: "html", //expect html to be returned
            success: function (response) {
                $("#chattercontent").html(response);
                timer = setTimeout(function(){
                    load(currentUrl);
                }, 5000);
            }
        });
    }

    load(currentUrl);

    $(".list-group-item").click(function(e) {
        e.preventDefault();
        //update url on click
        currentUrl = this.href;
        //cancel existing timer
        clearTimeout(timer);
        load(currentUrl);
    });
});

使用ajax加载的内容会丢失？

3 个答案: