提交表单时重新加载网页答案

【问题标题】：Webpage reloading on submitting form提交表单时重新加载网页
【发布时间】：2017-06-22 14:38:12
【问题描述】：

我正在尝试使用 Node.js 和 Socket.io 制作一个网络聊天应用程序。我让用户输入输入表单，然后单击发送按钮发送消息。现在它处于开发阶段，所以我只想看看消息是否从客户端传递到服务器。所以在我的客户端，当点击提交按钮时，我使用发出一个事件，并将一条消息传递给服务器。在我的服务器端，我有代码可以监听此事件并将其注销。但是每次我运行它时，每次提交表单时客户端都会断开连接并重新连接，并且消息没有按我预期的那样被记录。

这是来自 app.js 的代码

  io.on('connection', function(socket){
  console.log('Client connected!');

  socket.on('message_sent', function(msg){// Just for testing purposes
    console.log('Clent says: ' + msg);
  });

  socket.on('disconnect', function(){
    console.log('Clent disconnected!');
  });
});

我得到的只是“客户端已连接！”和“客户端断开连接！”每当我尝试发送消息时。这是在客户端上运行的脚本

<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('message_sent', $('#usermessage').val());
    $('#usermessage').val('');
    return false;
  });
</script>

正确解释为什么这不起作用将非常有帮助。

【问题讨论】：

你能把你的html代码也显示一下吗？看起来您正在尝试遵循本教程 socket.io/get-started/chat，我会确保所有内容都匹配。
@Noah 是的，那是我学习的对象。代码几乎相同，只是我稍微更改了前端。无论如何，这是代码：jsfiddle.net/o0kcb6xj/1
能不能在bootstrap.js之前先导入jquery.js

标签： jquery node.js socket.io

【解决方案1】：

HTML 元素可能应用了您可能需要覆盖的默认设置。当您将<button/> 添加到<form/> 元素时，会发生预期的事件；提交事件。这期望重定向到表单中的指定 url。如果表单没有 url，它将重新加载页面。要覆盖它，您需要阻止按钮的默认行为。试试这个：

var socket = io();
$('form').submit(function(ev){
  ev.preventDefault(); //the secret sauce
  socket.emit('message_sent', $('#usermessage').val());
  $('#usermessage').val('');
  return false;
});

【讨论】：

还是不行！它正在做与以前完全相同的事情

【解决方案2】：

在 jsfiddle 上，您的表单只是 <form> 尝试更改为 <form action="">，就像您正在使用的教程中一样。

【讨论】：

还没有运气。还是一样！
我会尝试完全按照教程中的方式进行操作，然后如果可行，您可以开始将其转换为您的版本以缩小问题范围。

【解决方案3】：

当你把你的脚本放在<head>标签中时，在DOM操作之前你应该确保dom已经准备好，因为没有form来附加一个submit事件给它；所以用 jquery dom ready 函数包装你的脚本：

<script>
  $(function() {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault();
      socket.emit('message_sent', $('#usermessage').val());
      $('#usermessage').val('');
    });
  });
</script>

【讨论】：

实际上我在之后一直移动客户端脚本，现在一切正常！
当然你可以把它们放在那里，或者如果你把它们放在<head>标签上，你应该在dom ready时调用它们。