首页 技术 正文
技术 2022年11月15日
0 收藏 831 点赞 3,945 浏览 1515 个字

照着Socket.io官方的聊天室代码敲了一遍,遇到了一个奇怪的问题:

每次点击SEND按钮的时候,都会重新刷新页面。

在点击页面的一瞬间,
看到了正在加载jquery的提示,

然后以为是jquery用的官方cdn的问题导致的,

于是把从官方下载了一个jquery文件放到index.html同级目录,

结果在运行的时候死活找不到jquery文件,这个问题有待解决。

后面认认真真的思考了以下,

SEND按钮其实是没有点击事件的,按钮为啥会点击刷新页面了,

BING搜索了一下关键词:button+刷新页面,

发现果然是button的问题,

只要在button的属性里面加上type=”button”那么就不会刷新了。

最终,能够正常跑起来的前端代码是这样子的:

 <!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
var socket = io(); $('form').submit(function(){
socket.emit('message',$('#m').val());
$('#m').val('');
return false;
});
function sendMsg(){
console.log('clicked');
socket.emit('message',$('#m').val());
$('#m').val('');
}
socket.on('connect',function(){
$('#messages').append($('<li>').text("Connected"));
socket.on('dmessage', function(msg){
$('#messages').append($('<li>').text(msg));
});
}); </script>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button type="button" id="sendbtn" onclick="sendMsg(event)" autopostback="false">Send</button>
</form>
</body>
</html>

index.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,088
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,564
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,413
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,186
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,822
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,905