servlet之qq（二）_sersceqq-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28711703/article/details/51984049

这节的主要内容是能在前端大致能即时聊天

1.登录：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>聊天室</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
    <link rel="stylesheet" href="css/login.css"/>
</head>
    <body>
    <div id="divLogin">
    <fieldset>
    <h3>用户登录</h3>
    <div class="content">
    <div>
    用户名: <input  type="text" id="txtName" class="txt"/></br>
    密码:   <input  type="password" id="txtPass" class="txt"/>
    </div>
    <div class="btnCenter">
    <input type="button" class="btn" id="Button1" value='登录'/>  
    <input type="Reset" class="btn" id="Reset1" value='取消'/>
    </div>
    <span id="divMsg" class="clsTip">正在发送登录请求</span>
    </div>
    </fieldset>
    </div>
    </body>
</html>

点击登录：button1响应

$(function(){
	$("#divMsg").ajaxStart(function(){
		$(this).show();
	})
	$("#divMsg").ajaxStop(function(){
		$(this).html("请求处理已完成。").hide();
	})
	$("#Button1").click(function(){
		var $name=$("#txtName");
		var $pass=$("#txtPass");
		if($name.val()!="" && $pass.val()!=""){
			UserLogin($name.val(),$pass.val());
		}else{
			if($name.val()==""){
				alert("用户名不能为空！");
				$name.focus();
				return false;
			}else{
				alert("密码不能为空！");
				$pass.focus();
				return false;
			}
		}
	})
});
function UserLogin(name,pass){
	$.ajax({
	type:"POST",
	url:"/webChat/goChat",
	data:"action=Login&d="+new Date()+"&name="+name+"&pass="+pass,
	//oldMessage:"action=getOldMessage&d="+new Date(),
	success:function(data){
		
		if(data=="true"){
			window.location.href="/webChat/WebContent/ChatMain.html";
			
		//	alert(oldMessage);
		}else{
			window.location.href="/webChat/WebContent/Login.html";
			alert("用户名或密码错误");
			return false;
		}
	}
	}
	);
}