I recently wrote a chat room, and I used the example from the official website of scoket.io to copy and paste directly. However, after I wrote it, I sent a message, and the data appeared briefly, and then the page was refreshed, wtf?
After finally getting the data, it was gone. Finally, after studying the front-end and back-end, I found out that the official website I copied from the front-end is a form. It is because of him. The button send is a sumbit. As long as you submit, he thinks you submitted the form. Then the action triggered after submitting is directly on the letter page! ! !
Then I directly deleted the form, including all the buttons inside, from its official website code, and wrote an ordinary button by hand, which was perfectly solved, and the page would not be refreshed after submission.
For the code on the official website, it is recommended to write the button yourself, and it is recommended not to use it
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>code written by myself
<div class="bttons">
<input type="text" id="input" autocomplete="off" />
<button onclick="btns()" id="one">Send</button>
</div>In this way, the page will not be automatically refreshed, a perfect solution!