AJAX大白菜学习笔记之四：用户登录-POST-检验用户名是否存在

最新推荐文章于 2022-10-31 14:34:33 发布

huai2325

最新推荐文章于 2022-10-31 14:34:33 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/huai2325/article/details/108427185

版权

检验输入的用户名是否已经存在，如果存在，可以提交，如果不存在，则提示注册

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" >
	<title>用户登录</title>
</head>
<body>
	<div align="center">
		<h3>用户登录</h3>
		<form action="check.php" method="post">
			<p>账号：<input type="text" name="name" id="name"></p>
			<span id="warning" style="color:red"></span>
			<p>密码：<input type="password" name="password" id="password"></p>
			<p><input type="submit" id="submit" value="提交"></p>
			<p id="tips"></p>
		</form>
	</div>
</body>

<script>
	var user = document.getElementById("name");  // 获取用户控件
	user.onblur = function(){   //当用户离开当前文本框的时进行验证

		// 1.创建AJAX对象
		var xhr = new XMLHttpRequest;

		// 2.创建请求事件的监听
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				var warning = document.getElementById("warning");
				if(xhr.responseText == 0){   //用户不存在,禁止提交按钮
					warning.innerHTML = "新用户,请先注册再登录~~~";
					document.getElementById("submit").disabled = true;
				}
				else   //用户存在,清除提示信息,并把提交按钮打开
				{
					warning.innerHTML = "";
					document.getElementById("submit").disabled = false;
				}
			}
		}

		// 3.初始化一个url请求
		var user = document.getElementById("name").value;
		var password = document.getElementById("password").value;
		var data = "name=" + user + "&password=" + password;   // 生成post请求数据
		var url = "check.php";   // url地址
		xhr.open("post", url, true);   // 请求类型为get,交互方式为异步

		// 4.设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

		// 5.发送url请求
		xhr.send(data);

		var submit = document.getElementById("submit");
		submit.onclick = function(){
			var tips = document.getElementById("tips");
			tips.innerHTML = "验证通过,正在跳转中~~"

			return false;  // 禁止提交按钮的默认行为
		}


	}
</script>
</html>

check.php

<?php
	$userList = ["peter", "jack", "mike"];   //  已注册用户列表
	$user = isset($_POST["name"]) ? $_POST["name"] : "";
	echo in_array($user, $userList) ? 1 : 0;  // 如果用户名不在列表中返回0, 否则返回1

huai2325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX大白菜学习笔记之四：用户登录-POST-检验用户名是否存在

检验输入的用户名是否已经存在，如果存在，可以提交，如果不存在，则提示注册login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" > <title>用户登录</title></head><body> <div align="center"> <h3>用户登录</h3&g
复制链接

扫一扫