我的第九个AJAX程序(注册页面)

最新推荐文章于 2024-02-26 15:31:48 发布

原创最新推荐文章于 2024-02-26 15:31:48 发布 · 663 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS AJAX

js 专栏收录该内容

137 篇文章

订阅专栏

本文介绍了一个学子注册页面的实现过程，包括前端验证和后端连接数据库进行用户名唯一性检查等功能。该页面使用了HTML、CSS和JavaScript进行布局及交互设计，并通过PHP连接MySQL数据库进行数据验证。

前端：

common.js

function $(id) {
	return document.getElementById(id);
}

function createXhr(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");
	}
	return xhr;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学子注册</title>
	<style>
		#span1 {
			display: inline-block;
			width: 100px;
			text-align: right;
		}
	</style>
</head>
<body>
	<h2>注册页面</h2>
	<form action="register.php" method="post">
		<p>
			<span id="span1">用户名：</span>
			<input type="text" name="uname" id="uname" onblur="checkuname()">
			<span id="unameTip"></span>
		</p>
		<p>
			<span id="span1">密码：</span>
			<input type="password" name="upwd" id="upwd" onblur="checkupwd()">
			<span id="upwdTip"></span>
		</p>
		<p>
			<span id="span1">重复密码：</span>
			<input type="password" name="cpwd" id="cpwd" onblur="checkcpwd()">
			<span id="cpwdTip"></span>
		</p>
		<p>
			<span id="span1">电子邮件：</span>
			<input type="email" name="email" id="email">
		</p>
		<p>
			<span id="span1">联系方式：</span>
			<input type="text" name="phone" id="phone" onblur="checkphone()">
			<span id="phoneTip"></span>
		</p>
		<p>
			<span id="span1">姓名：</span>
			<input type="text" name="user_name" id="user_name" onblur="checkuser_name()">
			<span id="userNameTip"></span>
		</p>
		<p>
			<span id="span1">性别：</span>
			<select name="gender" id="gender">
				<option value="1">男</option>
				<option value="0">女</option>
			</select>
		</p>
		<input type="submit" value="提交">
	</form>
	
	<script src="common.js"></script>
	<script>
		function checkuname() {
			var uname = $("uname").value;
			if(uname == ""){
				$("unameTip").innerHTML = "不能为空";
			}else{
				var xhr = createXhr();
				console.log(uname);
				xhr.open("get","checkuname.php?uname="+uname,true);
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 && xhr.status == 200){
						var resText = xhr.responseText;
						$("unameTip").innerHTML = resText;
					}
				}
				xhr.send(null);
			}
		}
		function checkupwd() {
			var upwd = $("upwd").value;
			if(upwd == ""){
				$("upwdTip").innerHTML = "不能为空";
			}else{
				$("upwdTip").innerHTML = "通过";
			}
		}
		function checkcpwd() {
			var upwd = $("upwd").value;
			var cpwd = $("cpwd").value;
			if(cpwd == ""){
				$("cpwdTip").innerHTML = "不能为空";
			}else if(upwd == cpwd){
				$("cpwdTip").innerHTML = "通过";
			}else{
				$("cpwdTip").innerHTML = "密码不一致";
			}
		}
		function checkphone() {
			var phone = $("phone").value;
			if(phone == ""){
				$("phoneTip").innerHTML = "不能为空";
			}else{
				$("phoneTip").innerHTML = "通过";
			}
		}
		function checkuser_name() {
			var user_name = $("user_name").value;
			if(user_name == ""){
				$("userNameTip").innerHTML = "不能为空";
			}else{
				$("userNameTip").innerHTML = "通过";
			}
		}
	</script>
</body>
</html>

后台：

init.php

<?php 
	
	$conn = mysqli_connect("127.0.0.1","root","","xz",3306);
	$initsql = "SET NAMES UTF8";
	mysqli_query($conn,$initsql);
?>

checkuname.php

<?php 

	require("init.php");
	@$uname = $_REQUEST["uname"];
	if($uname == null || $uname == ""){
		die("uname required");
	}

	$sql = "SELECT uname FROM xz_user WHERE uname='$uname'";
	$result = mysqli_query($conn,$sql);

	if($result === false){
		echo "异常，请检查SQL语句";
		echo $sql;
	}else{
		$count = mysqli_affected_rows($conn);
		if($count == 1)    //缺点：这里没有对已经重复的用户名设置成不能提交，只能提示
			echo "用户名重复";
		else
			echo "用户名可以使用";
	}
?>