Ajax登录验证功能

原创 2019-03-05 14:44:01 457
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>ajax登录验证</title>
	</head>
	<body>
		<h2>登录页面</h2>
		<div>用户名:<input type="text" id="uid" /></div>
		<div>密码:<input type="text" id="pwd" /></div>
		<div><input type="button" id="btn" value="登录" /></div>
		<script type="text/javascript">
			$("#btn").click(function() {
				//第一步:取数据
				var uid = $("#uid").val();
				var pwd = $("#pwd").val();
				//第二步:验证数据,需要从数据库调数据
				$.ajax({
					url: "login.php", //请求地址
					data: {
						uid: uid,
						pwd: pwd
					}, //提交的数据
					type: "POST", //提交的方式
					dataType: "TEXT", //返回类型 
					success: function(data) {
						if (data.trim() == "OK") {
							window.location.href = "main.html";
						} else {
							alert("用户名或者密码错误");
						}
					}
				})
			})
		</script>
	</body>
</html>


批改老师:韦小宝批改时间:2019-03-06 09:06:23
老师总结:通过ajax来进行无刷新登录验证给用户的体验也会比普通的登录验证要好的多 现在的网站基本上都是ajax来进行登录验证 以及返回的信息也都是通过json的形式来进行返回

发布手记

热门词条