我正在尝试为网页创建聊天功能，当我按Enter键时，它会不断重新加载。谁能告诉我为什么会这样吗？

Question

This is the main body of the code. 这是代码的主体。 Basically I am trying to write the client side page for a chat server. 基本上，我正在尝试为聊天服务器编写客户端页面。 Assuming the server interaction is correct the page will never be able to take the messages sent back from the server because the page refreshes every time I hit the enter . 假设服务器交互正确无误，则该页面将永远无法接收从服务器发送回的消息，因为每次我按Enter键时页面都会刷新。 The code is supposed to send a message to the server and then the server sends the message to all connected clients and the client appends the message to the end of the list. 该代码应该将消息发送到服务器，然后服务器将消息发送到所有连接的客户端，然后客户端将消息附加到列表的末尾。

<!DOCTYPE html>
    <html>
    <head>
    <title>Chat</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://localhost:4000/static/_stylesGlobal.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>

        function sendChat(msg)
        {
            socket.emit('newMessage', {message:msg} );
            console.log("Sent by User: %s", msg);

        }

        function updateChatLog(msg)
        {
            $("#chatLog").append(msg.message + "<br>");
            console.log(msg.message);
        }

        function msgReceived(msg)
        { 
            $("clientCount").html(msg.clients);
        }

        function clientUpdate (msg)
        {
            $("#clientCount").text(msg.clients);
        }


         $(document).ready(function () {

            $("#clientCount").text("0");


            socket = io.connect('http://localhost:4000');

            socket.on('mUpdate',function(msg){updateChatLog(msg); msgReceived(msg);});
            socket.on('nClientUpdate',function(msg){clientUpdate(msg);});
            $("#enterChat").click( function() {
            var messageValue = $("#chatMessage").val();
            console.log("Entered by User: %s", messageValue);
            sendChat(messageValue);

            });

            });




    </script>   
    </head>


    <body>
    <header role="banner" >
        <h1>Chat</h1>

        </header>
    <nav role="navigation" id = "main_nav_bar">
    <ul>
        <li id="homenav"><a href="http://localhost:4000/">Home</a></li>
        <li id="calculatornav"><a href="http://localhost:4000/static/calculator.html">Calculator</a></li>
        <li id="logbooknav"><a href="http://localhost:4000/static/logbook.html">Logbook</a></li>
        <li id="gallerynav"><a href="http://localhost:4000/static/gallery.html">Gallery</a></li>
         <li id="downloadnav"><a href="http://localhost:4000/static/download.html">Download</a></li>
        <li id="chatnav"><a href="http://localhost:4000/static/chat.html">Chat</a></li>
    </ul>
    </nav>

        <main>
            <div id="chatWindow">
            <h3>Welcome To Chat</h3>


            <div id="chatLog"></div>

            </div>
    <form id="chatInput">
    <p><span id="clientCount">0</span> Online Now</p>
    <br>
      <input type="text" id="chatMessage" value="Your Message Here !" style="width: 100%;">
      <br>
      <input type="submit" value="Enter" href="#chatInput" id="enterChat">
    </form> 

        </main>

    <footer role="contentinfo">
    </footer>



    </body>
    </html>

The main culprit for this reload is the enter chat function: 此重新加载的罪魁祸首是输入聊天功能：

$("#enterChat").click( function() {
            var messageValue = $("#chatMessage").val();
            console.log("Entered by User: %s", messageValue);
            sendChat(messageValue);

            });

If anyone could point me towards why the page is reloading I could actually work towards seeing if the message from the server is being passed properly. 如果有人可以指出为什么要重新加载页面，那么我实际上可以尝试查看服务器消息是否正确传递。 On top of that I would really appreciate it. 最重要的是，我真的很感激。

Answer 1

You can just add this 您可以添加此

$('#chatInput').submit(function(e) {e.preventDefault()});

To prevent the default behavior of form submission on enter. 为了防止在输入时提交表单的默认行为。

我正在尝试为网页创建聊天功能，当我按Enter键时，它会不断重新加载。谁能告诉我为什么会这样吗？

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-02-16 19:06:45

我正在尝试为网页创建聊天功能，当我按Enter键时，它会不断重新加载。 谁能告诉我为什么会这样吗？

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-02-16 19:06:45

我正在尝试为网页创建聊天功能，当我按Enter键时，它会不断重新加载。谁能告诉我为什么会这样吗？

解决方案1
2 已采纳 2016-02-16 19:06:45