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;。试了一下，它工作得很好。我想了解为什么会有效。谁能解释一下？另外，您能解释为什么/?已添加到网址中吗？

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的网址。

在您的情况下，您没有name属性的输入，因此您的GET参数是＆＃34;空的＆＃34; （/?<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

一个简单易行的答案是

＆＃34;返回false会阻止导航＆＃34;

在需要加入用户或浏览器操作的情况下，始终使用返回false。

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

停止表单提交

停止导航和超链接跳转

除了return false之外，您还可以使用

   event.preventDefault();

   event.stopPropagation();

现在关于表单提交

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

当默认表单中没有任何内容使用GET

提交时

传递url中的值 - ex - something.html？para1 = value1＆amp; para2 = value2

这是快速且不太安全的，每次提交表单时都会获取所有表单元素将在url中传递

Answer 3

来自jQuery submit()文档：

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

所以发生了什么，阻止了submit事件发生时触发的默认事件行为。

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

希望这有帮助！

Answer 4

你的表单元素没有方法，所以设置了默认方法get。如果单击“发送”，则会在current page +？

之后添加所有输入元素

return false会阻止提交操作。

Answer 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

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

5 个答案:

＆＃34;返回false会阻止导航＆＃34;