Javascript 是否绝对没有办法让html表单在没有jQuery的情况下提交后不刷新页面？_Javascript_Html_Jquery_Socket.io

Javascript 是否绝对没有办法让html表单在没有jQuery的情况下提交后不刷新页面？

javascript html jquery socket.io

Javascript 是否绝对没有办法让html表单在没有jQuery的情况下提交后不刷新页面？,javascript,html,jquery,socket.io,Javascript,Html,Jquery,Socket.io,因此，我现在正在使用socket.io学习node.js服务器，提交表单将重新创建一个新的web套接字连接。我已经读到，可以使用jQuery修改表单的提交操作以避免刷新页面，但是现在我只想看看是否可以在没有jQuery或AJAX的情况下完成。我的html如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

因此，我现在正在使用socket.io学习node.js服务器，提交表单将重新创建一个新的web套接字连接。我已经读到，可以使用jQuery修改表单的提交操作以避免刷新页面，但是现在我只想看看是否可以在没有jQuery或AJAX的情况下完成。我的html如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket</title>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <form id="form" onsubmit="" action="">
        <input name="message" id="message" type="text" placeholder="message" autocomplete="off">
        <input id="send" type="submit">
    </form>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

我知道我的代码很幼稚，我现在只专注于理解socket.io的实现，这只是一个小测试。

使用Event.default

您可以使用表单的提交处理程序执行相同的操作：

使button type=button而不是type=submit，和/或阻止处理程序中的默认操作。没有表单，提交了什么？jQuery只是一个JS库，它不能做本机JS不能做的任何事情。addEventListener的第二个参数应该是函数名，而不是函数调用。Oops，我的版本没有表单，我的不好。如果我使用该代码，我不能使用ENTER提交，否？它只适用于单击button@IdanCohen是的，但是你现在的那个也有同样的问题。这是一个单独的问题，通过不使用click事件解决。@IDanchen更正。解决方案是在表单上使用提交监听器，而不是在按钮上使用单击监听器。是的，我的代码包含了错误的版本。我很抱歉。所以我应该在main.js上添加一个侦听器，并在其中插入功能？我已经更新了答案。

const socket = io.connect('83.130.85.31:7776');

const button = document.getElementById("send");
const message = document.getElementById("message");
const form = document.getElementById("form");

const sendMessage = (event) => {
    socket.emit("message", {message: message.value});
    message.value = "";
};

form.addEventListener("submit", sendMessage)

socket.on("message", (data) => {
    console.log(data.message);
})

const sendMessage = (e) => {
    e.preventDefault();
    socket.emit("message", {message: message.value});
    message.value = "";
};

button.addEventListener("click", sendMessage);

form.addEventListener("submit", sendMessage);