为什么将 "return false;" 添加到提交事件会阻止页面刷新？

Question

我正在做一个关于使用 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>

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

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

Answer 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>

然后你提交那个表格，你会得到 URL 类似 /submit.php?foo=1&bar=2 的东西。

在您的情况下，您没有带有 name 属性的输入，因此您的 GET 参数是 "empty" (/?<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;.

Answer 2

一个简单易行的答案是

"Return false 阻止导航"

Return false 始终用于需要停止用户或浏览器操作的情况。

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

stopping form submit

stopping navigation and hyperlink jumps

除了return false你还可以使用

   event.preventDefault();

   event.stopPropagation();

现在关于表单提交

表单使用GET和POST提交，可由作者使用form tag、

中的method="POST"属性决定

当默认表单没有给出时使用 GET 提交

在 url 中传递值 - 例如 - something.html?para1=value1¶2=value2

速度快但安全性较低，每次您提交带有获取的表单时，所有表单元素都将在 url

中传递

Answer 3

来自 jQuery submit() 文档：

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

所以发生的事情是，submit 事件发生时触发的默认事件行为被阻止了。

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

希望对您有所帮助！

Answer 4

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

之后

return false 阻止执行提交操作。

Answer 5

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

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

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

下面的 link 很好地解释了尾部斜线的存在原因。 https://webmasters.stackexchange.com/questions/35643/is-trailing-slash-automagically-added-on-click-of-home-page-url-in-browser

为什么将 "return false;" 添加到提交事件会阻止页面刷新？

Why does adding "return false;" to a submit event prevent the page from refreshing?

javascript

jquery

node.js

socket.io

"Return false 阻止导航"