Javascript 刷新同一页面而不重新加载？

我已经在这里提出了这个问题，但没有一个答案是有效的。我在Django有一个消息应用程序，用户可以在其中互相发送消息。我想刷新页面，以便用户可以看到新消息。但是有一个问题，如果用户正在写一条消息，而我尝试每x分钟重新加载一次页面，那么用户正在写的消息就会消失。那么我该如何避免这种情况呢

/*This is one of the solutions that I have tried*/
window.location.reload(true);
history.go(0);
window.location.href=window.location.href;

messages.html：

{% extends 'profile/base.html' %}
{% load tz %}
{% block title %}
Messages
{% endblock %}
{% block head %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
          #form {
            position: fixed;
            bottom: 0;
            background-color:#f1f1f1;
          }
.container {
  border: 1px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 1px;
  margin: 1px 0;
}


.container::after {
  content: "";
  clear: both;
  display: table;
}

.darker {
  border-color: #ccc;
  background-color:#ddd;
}

.container img {
  float: left;
  max-width: 40px;
  height:40px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.time-left {
  margin-left:61px;
  color: #999;
}

h4 {
    display:inline;
}
    </style>
{% endblock %}
{% block content %}
{% if not chat %}
    <div class="container">
         Impossible de commencer un chat avec cet utilisateur ou bien vous n'avez pas acces a ce chat.
    </div>
{% else %}
    {% if chat %}
        <div id ='bottom' class="panel">
                {% for message_item in chat.message_set.all %}
                {% url 'profile' message_item.author.pk as the_user_url%}
    {% if message_item.is_readed %}
    <div class="container">
    {% else %}
    <div class="container darker">
    {% endif %}
    <a href="{{ the_user_url }}">

  <img src="{{ message_item.author.profile.avatar.url }}" alt="Avatar" style="width:100%;">
  <h4><a href="{{ the_user_url }}">{{ message_item.author.profile.prenom|title }}</a></h4>
  <p>{{ message_item.message }}</p>
  <span class="time-left">{{ message_item.pub_date|utc }}</span>
  </a>
</div>

                {% endfor %}
                <br><br><br><br>
            </div>
        </div>
    {% endif %}

    <div class='w3-container'>
    <div id='form'>
        <form method="post" action='{% url 'messages' chat.id %}'>
            {% csrf_token %}
            {{ form.as_p }}

            <input type="submit" value='envoyez' />
            </form>
        </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script>
        $('document').ready(function() {
           $('html').animate({scrollTop: document.body.scrollHeight},1);
        });
        </script>
{% endif %}
{% endblock %}

{%extends'profile/base.html%}
{%load tz%}
{%block title%}
信息
{%endblock%}
{%block head%}
#形式{
位置：固定；
底部：0；
背景色：#f1f1；
}
.集装箱{
边框：1px实心#dedede；
背景色：#f1f1；
边界半径：5px；
填充：1px；
保证金：1px0；
}
.容器：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.深色{
边框颜色：#ccc；
背景色：#ddd；
}
.集装箱img{
浮动：左；
最大宽度：40px；
高度：40px；
宽度：100%；
右边距：20px；
边界半径：50%；
}
1.还剩时间{
左边距：61px；
颜色：#999；
}
h4{
显示：内联；
}
{%endblock%}
{%block content%}
{%如果不是聊天%}
不可能取消开始者的聊天时间。您可以访问ce聊天时间。
{%else%}
{%if chat%}
{chat.message_set.all%}
{%url'profile'消息\u item.author.pk作为\u用户\u url%}
{%如果消息_item.is_readed%}
{%else%}
{%endif%}
{{message_item.message}}

{{message_item.pub_date|utc}}
{%endfor%}





{%endif%}
{%csrf_令牌%}
{{form.as_p}}
$（'document'）.ready（函数（）{
$（'html'）.animate（{scrollTop:document.body.scrollHeight}，1）；
});
{%endif%}
{%endblock%}

URL.py：

from django.urls import path
from . import views

urlpatterns = [
    path('dialogs/<int:chat_id>/',views.MessagesView.as_view(), name='messages'),
    ]

从django.url导入路径
从…起导入视图
URL模式=[
路径（'dialogs/'，views.MessagesView.as_view（），name='messages'），
]

更可能是这样的：

<input type="text" value="<?php    if (isset($_POST['username'])) {        echo htmlspecialchars($_POST['username'], ENT_QUOTES);    }?>" name="username">

---

它被称为web 2.0，您无需再次加载页面。
最具交互性的页面只有一个页面，所有内容都在后台加载

例如，您可以将页面作为Pwa交付

要获取另一页的内容，应使用fetch（）函数


它回报了一个承诺。这样，您就不需要设置任何回调。
可以有多种方法来实现这一点

保存用户正在输入的输入字段的内容
本地存储，并在重新加载页面后重新填充该输入字段
使用Ajax检查是否创建了更多的消息，并且
在不重新加载任何内容的情况下填充消息
使用firebase或pusher等服务。它可以用来获得异步
收到新邮件时更新
使用套接字编程获取更新，只更改相关的
dom的一部分
对于消息传递应用程序，最好不要重新加载页面，而是使用Ajax/fetch，只需调用获取消息请求，然后在页面中显示消息，
例如：


const getMessages=（）=>{
取回（“https://jsonplaceholder.typicode.com/comments“”//使用您的消息请求url，这是一个示例
.then（（response）=>response.json（））
。然后（（消息）=>{
让messagesHtml=“”；
for（消息的var消息）{
messagesHtml+=`${message.name}`；//在此处使用您的消息html结构
}
让messagesContainer=document.getElementById（“messagesContainer”）；
messagesContainer.innerHTML=messagesHtml；
})
.catch（（err）=>console.log（err））；
}
设置间隔（getMessages，3000）
您可以使用ajax刷新消息，或者使用会话来生成消息。如果您正在编写消息传递系统，请使用WebSocket。这样就避免了刷新页面导致用户输入的内容丢失的问题，同时也避免了AJAX轮询的需要，这将导致服务器性能问题。@ming我是django和web开发方面的新手，现在我只需要使用AJAX，有人能告诉我如何在AJAX或使用Sessions中使用AJAX和JavaScript，本网站不替换相关文档和教程，但用于简明问题。谢谢您的回答，但我的后端是django。这没有帮助。@amadousow您在问题中使用了html标记，因此我发布了此答案。对不起，如果我帮不上忙谢谢你的回答你能给我一个简单的例子吗？@amadousow在链接中有很多例子。您可以只更改div的内容，也可以使用document.body.innerHTML=fetchedContent设置整个正文。（但这不是更新内容的好方法）我可以给你看一下我的html文件吗？或者如果你有时间，我可以和你聊天，这样我们就可以讨论了please@amadousowakram用fetch编写了一个很好的示例。我在打电话，所以我现在不能写一个例子。如果您是专家，您可以使用推送通知。所以你有一个直接的前锋，你不需要投票。但它并不适用于所有浏览器。@Adriano我已使用Gonactive将我的网站转换为移动应用程序。我从未使用过Fetch，所以…谢谢你的回答，我真的很想使用2），但我不知道如何使用。谢谢你的回答，这是一个非常好的主意，我尝试过，但它并没有解决我的问题。我认为解决方案将使用ajax。你的欢迎使用，是的，您可以使用我提供的第一个代码片段，它的行为与ajax相同，而且更简单！我已经编辑了我的帖子。你需要在fetch（“dialogs/”）中调用你的url，然后在响应中，正如我在你的代码中看到的那样，你将拥有我的所有数据（比如is_readed，author，…）