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

本文主要是介绍我的第九个AJAX程序(注册页面)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端：

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" οnblur="checkuname()"><span id="unameTip"></span></p><p><span id="span1">密码：</span><input type="password" name="upwd" id="upwd" οnblur="checkupwd()"><span id="upwdTip"></span></p><p><span id="span1">重复密码：</span><input type="password" name="cpwd" id="cpwd" οnblur="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" οnblur="checkphone()"><span id="phoneTip"></span></p><p><span id="span1">姓名：</span><input type="text" name="user_name" id="user_name" οnblur="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 "用户名重复";elseecho "用户名可以使用";}
?>

这篇关于我的第九个AJAX程序(注册页面)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！