javascript - 为什么将 "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>

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

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

Answer 1

先约/? :

表单提交的默认方法是GET , 但您可以使用 <form method="POST"> 更改它(如果未提供方法，则默认为 <form method="GET">)。

与 POST表单数据在请求中传递 body , 与 GET - 在请求网址中 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; .