html为啥总是要刷新才能同步修改

Posted 2023-05-08

参考技术A 首先，可以明确的是，网页局部刷新是不难实现的，实际上很多网站也是支持的，比如站内信、实时大盘数据之类的应用。

但是为什么很多网站不支持呢？主要原因有几个方面：首先要做好还是需要一些基础设施和技术支持的，另外也需要一些额外的服务器资源。所以一些网站，尤其是传统的网站大多不支持，比如一些新闻站点、公告/公示、内容发布网站等等。

技术实现方案有很多种:

最简单的就是每个一段时间（比如3秒）请求接口更新数据并重新渲染，这么做对服务器压力较大。

其次是通过长连接，就是网页发起一个HTTP请求，服务器端一直不响应，等到有数据更新的时候再吧新数据返回，网页拿到数据后重新渲染，然后再次发起一个HTTP请求，不断这么循环，网页就可以实时拿到最新数据。

更好的方案是通过websocket建立长连接，这样web端和服务器端就可以实时的双向通讯，及时拿到最新数据，看起来与HTTP长连接区别不大，但是因为实现机制不一样，websocket会有更低的资源消耗。

网站不支持并不意味着用户不需要，比如公告/公示网站，商品信息，动态的用户行为、销售等数据，对很多人就非常重要，需要实时关注。这个时候可以通过一些辅助工具完成信息的监控和管理，比如：网页更新提醒浏览器插件

为啥要添加“return false;”提交事件阻止页面刷新？

【中文标题】为啥要添加“return false;”提交事件阻止页面刷新？

【英文标题】：Why does adding "return false;" to a submit event prevent the page from refreshing?为什么要添加“return false;”提交事件阻止页面刷新？

【发布时间】：2015-11-15 06:25:28

【问题描述】：

我正在做一个关于使用 Node.js 和 socket.io 制作聊天服务器的教程。这是我在 html 中的内容：

<form id='chat_form'>
  <input id='chat_input' />
  <button>Send</button>
</form>
<script type='text/javascript'>
var socket = io();
$('#chat_form').submit(function()
  var message = $('#chat_input').val();
  socket.emit('messages', message);
  $('#chat_input').val('');
);
</script>

我不会费心把我拥有的东西放在后端，因为那部分工作正常。但是在浏览器中，每次提交，页面都会刷新，并且在网址栏末尾添加了一个/?。

环顾四周，发现另一个教程（socket.io 网站上的那个），代码基本相同，但他们在提交事件的末尾添加了return false;。试过了，效果很好。我想了解为什么会这样。谁能解释一下？另外，您能解释一下为什么将/? 添加到URL 中吗？

【问题讨论】：

返回假；阻止表单的操作，因此它停止提交表单，因为这是表单的操作（它是 this in jquery 的纯 js 版本）。您通常应该在带有 ajax 调用的表单提交上使用它（以阻止页面刷新）。如果您的表单上没有方法，它看起来好像在提交时使用了 get 方法，这就是为什么要添加 ?到 url 并刷新页面 - see this post

LOL 我想知道为什么这个问题得到 4 票。这不属于 node.js 标签。我觉得唯一的原因是这个问题很容易回答：P

【参考方案1】：

先说说/?：

表单提交的默认方法是GET，但是你可以用<form method="POST">更改它（如果没有提供方法，默认是<form method="GET">）。

使用POST 表单数据在请求body 中传递，使用GET - 在请求url params 中。

如果你有

<form action="/submit.php" method="GET">
   <input name="foo" value="1" />
   <input name="bar" value="2" />
</form>

然后您提交该表单，您将获得类似 /submit.php?foo=1&bar=2 的 URL。

在您的情况下，您没有带有 name 属性的输入，因此您的 GET 参数是“空的”（/?<params should go there>）。

您可以阅读更多内容： http://www.w3schools.com/tags/att_form_method.asp

关于return false;

提交表单会强制页面重新加载（使用POST 或GET 请求）。如果您使用javascript 提交表单，则需要阻止此默认操作。你可以这样做

$('#chat_form').submit(function(event)
    //....
    event.preventDefault();
);

或者return false;。

【参考方案2】：

一个简单易懂的答案是

“返回 false 阻止导航”

return false 总是在用户或浏览器操作需要被弯腰的情况下使用。

在每一种编程语言中，return 后的代码都不会被执行，这意味着不会发生进一步的动作，可以是

停止表单提交

停止导航和超链接跳转

除了return false你也可以使用

   event.preventDefault();

   event.stopPropagation();

现在关于表单提交

使用GET 和POST 提交表单，这可以由作者使用form tag 中的method="POST" 属性决定，

当使用 GET 提交默认表单时没有给出任何内容时

在 url 中传递值 - ex - something.html?para1=value1&para2=value2

速度快但安全性较低，每次提交表单时，所有表单元素都会在 url 中传递

【参考方案3】：

来自jQuery submit() 文档：

现在，当提交表单时，会发出警告消息。这发生在实际提交之前，因此我们可以通过在事件对象上调用 .preventDefault() 或从我们的处理程序中返回 false 来取消提交操作。

因此，正在阻止submit 事件发生时触发的默认事件行为。

jQuery 提交函数的默认提交方法是 HTML GET，它以 URL 查询的形式提供表单参数，格式为 /?queryParam=value。因此，/? 出现在 URL 中，在 /? 之后没有查询参数（因为表单中没有提供任何参数）。

希望这会有所帮助！

【参考方案4】：

您的表单元素没有方法，因此设置了默认方法 get。如果点击发送，所有输入元素都添加在current page+之后？

return false 阻止执行提交操作。

【参考方案5】：

返回 false 会阻止触发 html 元素事件的所有默认函数。

一个例子是一个 html 表单，一旦你点击提交按钮，它默认是导航到另一个页面。如果您使用 Ajax 函数在不离开页面的情况下将数据发送到服务器，您不希望发生这种情况。

另一种方法是将事件对象参数传递给事件函数。 然后在函数的开头键入event.preventDefault();。

以下链接很好地解释了为什么出现尾部斜杠。 https://webmasters.stackexchange.com/questions/35643/is-trailing-slash-automagically-added-on-click-of-home-page-url-in-browser