我如何创建一个 javascript function 在按下表单提交按钮时更改 html

Question

当 html 不是表单提交或按钮的一部分时，我可以轻松更新它。 或者即使它只是一个纯按钮元素（而不是来自表单的输入）。 但是，当我尝试 append 一个字符串到

class "chatGoesHere"，没有任何反应。 控制台也会快速重新加载，因为表单将要发送到 \send。

我很高兴发布我的 views.py 和 urls.py，但是，我很确定问题出在下面的 html 文档中：

<p class="chatGoesHere" id="chatGoesHere"> 1st Item! </p> 

<form action="\send\" method="post">
    <input type="text" name="userMessage" />
    <input type="submit" value="Send to smallest_steps bot" class="sendButt" id="sendButt" />
  </form>
  
  <script>
      var btn = document.getElementById("sendButt");
      btn.addEventListener("click", updateChat);
  
      function createMenuItem(name) {
          let li = document.createElement('p');
          li.textContent = name;
          return li;
      }
      const td = document.getElementById('chatGoesHere');
      td.appendChild(createMenuItem("TEST2"))
  
      function updateChat(){
          const td = document.getElementById('chatGoesHere');
          td.appendChild(createMenuItem("TEST3"))
      }
  </script>

我希望每次用户按下表单的提交按钮时，都会在页面中添加一些内容，而无需重新加载页面。

谢谢

Answer 1

您需要将 django 与 sockets 一起使用。

看看这个走过。

几年前帮助我做同样的事情！

https://channels.readthedocs.io/en/stable/tutorial/part_2.html