Question

我有一个简单的聊天应用程序，该应用程序有一个主页，然后在该页面上有一个名为chats的部分。使用PHP将所有消息通过文本区域发布到messages.html，然后使用echo file_get_contents提取。

<div id="messages" class="messages">
<p class="systemnotice center">There are no more messages to load</p>
<br>
<div class="chats"><?php echo file_get_contents("./messages.html") ; ?></div>
</div>

此刻，我每5秒钟刷新一次整个页面以检查是否有新消息。每封邮件“发送”后，新邮件都会自动检查，并以send.php发布，也会将用户送回收件箱。

我正在使用以下脚本将消息滚动到页面底部，并每5秒刷新一次页面。

 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;
});

有没有一种方法可以仅刷新div id="messages"或使用?php echo file_get_contents("./messages.html") ; ?>并每5秒获取一次内容，如果整个页面不需要刷新，则只需刷新消息即可。

任何帮助/可行的代码片段都将不胜感激，因为它的其余部分仍然有效，除非您一直键入，否则总是在刷新时刷新整个页面，只是有点不方便。

预先感谢：）

UPDATE

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;
});

.messages {
    background-color: #FFFFFF;
    height: 50vh;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow-wrap: break-word;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="chat-header chat-hidden">
<a href="/"><img class="logo" src="./logo.png" alt="Logo"> </a>
</div>
<br>
<div id="messages" class="messages">
<p class="subheading center">There are no more messages to load</p>
<br>
<div class="chats"><?php echo file_get_contents("./messages.html") ; ?></div>
</div>
<br>
<div class="messagebox">
<div class="messagefunction">
<div class="compose">
<form method="post" name="send.php" action="send.php">
<textarea name="message" id="message" rows="4" cols="60" placeholder="Compose a message." maxlength="500" autofocus required></textarea>
</div>
<div class="send">
<button type="submit" class="send-button">Send Icon Goes Here</p></button>
</form>
</div>
</div>
</div>
<br><br>


</script>
</body>

我已经用简单的消息页面版本更新了问题。我只需要messages DIV重新加载，而不需要整个页面。我还需要消息DIV在加载时滚动到底部以显示最新消息。

此刻；

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);
    }
 });

每5秒钟刷新一次页面，除非用户键入消息。我想替换为每5秒刷新一次DIV或再次获得PHP。

这只是我要重新加载的DIV，也只能在messages.html有更新时重新加载。无论如何，它会在发送消息时重新加载，因此这只是从其他人获取消息的问题。不过，我愿意接受建议，消息页面现在仅是文本。

Answer 1

尝试使用此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);
    }
});
}

Answer 2

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

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;
});

Answer 3

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

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

代码修正

这里的HTML

<div id="messages" class="messages">
<p class="systemnotice center">There are no more messages to load</p>
<br>
<div class="chats"><!-- you need nothing here --></div>
</div>

此处的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;
});

刷新只是在静态页面中聊天

3 个答案: