第一准备html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>账号注册</title>
</head>
<body>
<h1>账号注册</h1>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
//动态拿到用户输入的username
var uname=document.getElementById("username").value;
//开始ajax数据校验
//创建xhr对象,判断浏览器兼容性
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("microsoft.XMLHTTP");
}
//配置参数 3个 数据请求方式,数据提交文件url路径，true.准备传输
xhr.open("get","register.php?username="+uname,true);
//开始传输 null固定写法
xhr.send(null);
//回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//拿到响应的值
var result=xhr.responseText;
//js给id为result的标签加入内容,内容为php后端拿到的值
var result=document.getElementById("result").innerHTML=result;
}
}
}
}
}
</script>
<form action="register.php" method="get">
账号：<input type="text" name="username" id="username" />
<input type="button" value="点击校验用户名是否存在" id="btn" />
<span id="result"></span>
<br />
密码：<input type="password" name="pwd" />
<input type="submit" value="注册" />
</form>
</body>
</html>
第二PHP进行模拟数据库校验用户名是否存在
<?php
//拿到前端的username值
$uname=$_GET["username"];
//模拟数据库有"zhangsan"这个账号
if($uname=="zhangsan"){
//已被注册
echo "username NO!";
}else{
//未注册
echo "username OK!";
}
?>效果：
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
