Javascript 刷新静态页面中的聊天记录

我有一个简单的聊天应用程序，它有一个主页，然后在主页上有一个叫做

chats

的部分。所有消息都使用PHP通过文本区域发布到

messages.html

，然后使用

echo file\u get\u contents

获取

没有更多要加载的消息

您需要首先清除间隔，而不是再次运行它，因为将运行两个单独的间隔，请按如下方式修改代码：

var myTimer = setInterval('window.location.reload()', 5000);
 $('#message').on('keyup change', function(){
    if( $(this).val().length == '' ) {
        clearInterval(myTimer);
        myTimer = setInterval('window.location.reload()', 5000);
    } else {
        clearInterval(myTimer);
    }
 });  

document.addEventListener('DOMContentLoaded', function(){
  var messages = document.querySelector('#messages');
  messages.scrollTop = messages.scrollHeight;
});

---

您可以使用jQuery中的load函数来实现这一点。 它所需要的只是一个容器，您想将其嵌入其中，以及从中提取文件的位置。 在本例中，您只需要

$("#messages").load('messages.html');

对代码的修复

这里是Html

没有更多要加载的消息

Javascript在这里

//This should be done when page is loaded
setInterval(function(){
  $(".chats").load('./messages.html');
}, 1000)

var myTimer = setInterval('window.location.reload()', 5000);
 $('#message').on('keyup change', function(){
    if( $(this).val().length == '' ) {
        myTimer = setInterval('window.location.reload()', 5000);
    } else {
        clearInterval(myTimer);
    }
 });  

document.addEventListener('DOMContentLoaded', function(){
  var messages = document.querySelector('#messages');
  messages.scrollTop = messages.scrollHeight;
});

---

试试这个ajax，它会起作用：-

function getMessage(){
$.ajax({
    type: "POST",
    url: "page.php",//here your url to your page
    async: false,
    success: function(response){
    $('.chats').html(response); //if you want to replace html use this.
    //here you can use by id also like:- $('#messages').html(response);
    $('.chats').append(response);//if you want to append html then use this.
    setTimeout(function(){getMessage();}, 5000);
    },
    error: function(errormsg){
     console.log(errormsg);
    }
});
}

---

您可以使用ajax获得它，并将返回数据设置到

#messages

divI中。我真的不知道如何使用ajax。如果您能提供一个示例答案，我们将不胜感激。只需将

Doc Han

s代码放在

位置即可。重新加载
。它会将
messages.html
中的内容加载到
#messages
div中，而不刷新页面。实际上，这比我最初的解决方案更糟糕，整个页面仍会重新加载，但消息不会滚动到底。这会造成什么变化？它仍然会刷新整个页面，不是吗？改变是您创建了一个新的间隔，而没有结束在
var myTimer=setInterval（'window.location.reload（）'，5000）上声明的第一个间隔嗨，为了清楚起见，我更新了问题。请再看一看。你能提供更完整的代码吗，因为我不知道这会去哪里。有了这些代码，它会在任何时候自动将messages.html加载到页面中。它会在浏览器中刷新整个页面，而不仅仅是DIV，并且不再将它们滚动到底部，我的初始解决方案比这更好。这不起作用，页面只显示“不再加载”消息。上面的ajax代码可以工作，而且与您的要求一样，它不会刷新整个页面，也不会刷新您的div。它每5秒钟获取一次您的数据，只需替换或附加到您的消息div中，就像您所说的，您必须$（'html，body'）.animate（{scrollTop:$（“#yourDiv”）.offset（）.top}，2000）；此代码用于向下滚动。