记一次form标签引发的惨案

最新推荐文章于 2024-08-13 07:15:00 发布

kkorkk

最新推荐文章于 2024-08-13 07:15:00 发布

阅读量279

点赞数

分类专栏：前端文章标签： WebSocket form 页面刷新

本文链接：https://blog.csdn.net/kkorkk/article/details/80776872

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近在看WebSocket，于是自己动手搭了一个demo，前后台都搭建完了，连接没问题，断开连接也没有问题，但是就是发送信息时，连接会自动断开，这真是奇怪了，而且后台没有报任何错误！

首先我还没只是认为是连接断开了，后来经过认真观察发现，不是连接断开，而是页面的刷新导致WebSocket连接断开，这就更奇怪了。

当时的页面是这样子的：

当时的页面代码是这样子的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
	<h3>WebSocket Test</h3>
	<div class="row">
		<div class="col-sm-3">
			<button id="connect_btn" class="btn btn-info">连接</button>
			<button id="colseConnBtn" class="btn btn-danger">关闭连接</button>
			<button id="testBtn" class="btn btn-default">测试按钮</button>
		</div>
		<div class="col-sm-3">
		</div>
	</div>
	<hr >
	<form class="row">
		<div class="col-sm-3">
			<input id="text" type="text" class="form-control" placeholder="请输入信息">
		</div>
		<div class="col-sm-1">
			<button id="sendBtn" class="btn btn-success" οnclick="send()">发送</button>
		</div>
	</form>
	<hr>
	<div>
		<ul class="list-group" id="message"></ul>
	</div>
</body>
<script type="text/javascript">
	var webSocket = null;

	$("#connect_btn").click(function() {
		if ('WebSocket' in window) {
			websocket = new WebSocket("ws://localhost:8080/websocket");
			
			$("#connect_btn").attr('disabled',true);
			
			//连接发生错误的回调方法
			websocket.onerror = function() {
				setMessageInnerHTML("与服务器连接失败...");
			};

			//连接成功建立的回调方法
			websocket.onopen = function(event) {
				setMessageInnerHTML("与服务器连接成功...");
			}

			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				setMessageInnerHTML(event.data);
			}

			//连接关闭的回调方法
			websocket.onclose = function() {
				setMessageInnerHTML("已关闭当前链接");
			}

			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				websocket.close();
			}
		} else {
			alert("连接失败！当前浏览器不支持WebSocket!")
		}
	})
	
	$("#colseConnBtn").click(function(){
		closeWebSocket();
		$("#connect_btn").attr('disabled',false);
	})
	
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        $("#message").append("<li class=\"list-group-item\">" + innerHTML + "</li>");
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
    	var message = $("#text").val()
        websocket.send(message);
    	//alert(message)
    }
    
    $("#testBtn").click(function(){
    	alert('testBtn')
    })
	
</script>

</html>

我当时瞅了代码老半天，没毛病啊。怎么就出错了呢？后来写了一个测试按钮之后才发现，原来发送按钮是在form标签里面的，点击之后页面会自动刷新。把form标签改成div标签就可以了。不要问我为什么我会写成form标签，因为我刚开始想用form标签的form-horizontal，但是不雅观，然后就没改过去了。

说这么多，总结起来就是一点，但是这点大家又常常会忘记，那就是：

form标签里面的按钮，在点击之后页面会自动刷新！