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>

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

环顾四周，发现另一个教程(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; .