页面在提交按钮上不断重新加载答案

【问题标题】：Pages keeps reloading on submit button页面在提交按钮上不断重新加载
【发布时间】：2023-03-11 22:22:02
【问题描述】：

我正在使用 sioket.io 进行聊天。出于某种原因，当我点击提交按钮时，我的页面会重新加载。我使用了 return false，我也没有渲染我的发布路线。当我发送消息时，我希望消息在同一页面上弹出，而无需重新加载页面。

html:

<body>
    <form id="mario-chat">
        <div id="chat-window">
            <div id="output"></div>
        </div>
        <input id="username" type="text" placeholder="Handle"/>
        <input id="comments" type="text" placeholder="Message"/>
        <button id="send">Send</button>
    </form>

    <script src="/javascript/superhero-movies.js"></script>
    <script src="/reload/reload.js"></script>

</body>

超级英雄电影.js：

var socket = io.connect("http://localhost:5500");

var comments = document.getElementById('comments');
var handle = document.getElementById('username');
var btn = document.getElementById('send');
var output = document.getElementById('output');

btn.addEventListener("click", () => {
    socket.emit('chat', {
        comments: comments.value,
        username: username.value

    });
    return false;

});


socket.on('chat', function(data) {

    output.innerHTML += '<P><strong>' + data.username + ': </strong>' + data.comments + '</p>';
})

index.js：


router.post("/superhero-movies", function(req, res) {
    const { comments } = req.body;
    const user = req.user;

    const sqlDatabase = require('../db.js');
    sqlDatabase.connect(function(err) {
        io.on('connection', (socket) => {
            console.log('socket connect successful');

            socket.on('chat', function(data) {
                io.sockets.emit('chat', data)
            })
        })
    })

    sqlDatabase.query("INSERT INTO comments (user_id, comments) VALUES (?, ?)", [user, comments], function(error, results, fields) {
        if (error) throw error;
        console.log(results);

    })

    router.get("/superhero-movies", authenticationMiddleware(), function(request, results, err) {
        results.render('superhero-movies');
    });
})

任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

什么是 ?
这不是问题所在。 reload.js 在运行 nodemon 时立即重新加载页面。
你尝试过什么调试问题？

标签： javascript html mysql node.js socket.io

【解决方案1】：

您可以删除form 标签。使用 socket 或 ajax 请求进行聊天不是必需的。

或者不删除form标签，你可以为你的按钮添加type。如果没有定义type，按钮将充当提交按钮。提交按钮会在点击时重新加载页面。

 <button type="button" id="send">Send</button>

【讨论】：