分别创建用户名，邮箱，电话对应的后台文件
1.username.php
<?PHP
$username=$_GET["username"];
if($username=="gougou"){
echo "username OK";
}else{
echo "username error";
}
?>
2.email.php
<?PHP
$email=$_GET["email"];
if($email=="1010@qq.com"){
echo "email OK";
}else{
echo "email error";
}
?>
3.tel.php
<?PHP
$tel=$_POST["tel"];
/*校验电话码格式 */
if($tel=="0000"){
echo "tel OK";
}else{
echo "tel error";
}
?>
2.创建前台表格
<div class="box">
用户名：<input type="text" name="username" id="username" value="" />
<span class="show01">
</span>
<br><br>
邮箱：<input type="email" name="email" id="email" value="" />
<span class="show02">
</span>
<br><br>
电话：<input type="tel" name="tel" id="tel" value="" />
<span class="show03">
</span>
</div>
3.ajax获取后台数据
注意：使用onblur事件
是当form表单中的input输入框等元素失焦的情况下触发该事件。
<script type="text/javascript">
window.onload = function() {
var username = document.getElementById('username');
var show01 = document.getElementsByClassName('show01');
var email = document.getElementById('email');
var show02 = document.getElementsByClassName('show02');
var tel = document.getElementById('tel');
var show03 = document.getElementsByClassName('show03');
// 用户名
username.onblur = function() {
// 前提.获取input值
var uneValue = username.value;
// console.log(uneValue);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "username.php?username=" + uneValue, true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
// console.log(result);
show01[0].innerText = result;
}
}
}
}
// 邮箱
email.onblur = function() {
// 前提.获取input值
var emaValue = email.value;
// console.log(uneValue);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "email.php?email" + emaValue, true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
// console.log(result);
show02[0].innerText = result;
}
}
}
}
// 电话
tel.onblur = function() {
var telValue = tel.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST", "tel.php", true);
var param = "tel=" + telValue;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置请求体信息,仅适用于post
xhr.send(param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var result=xhr.responseText;
// console.log(result);
show03[0].innerText=result;
}
}
}
}
}
</script>
结果
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户名唯一性效验</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
span {
color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var username = document.getElementById('username');
var show01 = document.getElementsByClassName('show01');
var email = document.getElementById('email');
var show02 = document.getElementsByClassName('show02');
var tel = document.getElementById('tel');
var show03 = document.getElementsByClassName('show03');
// 用户名
username.onblur = function() {
// 前提.获取input值
var uneValue = username.value;
// console.log(uneValue);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "username.php?username=" + uneValue, true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
// console.log(result);
show01[0].innerText = result;
}
}
}
}
// 邮箱
email.onblur = function() {
// 前提.获取input值
var emaValue = email.value;
// console.log(uneValue);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "email.php?email" + emaValue, true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
// console.log(result);
show02[0].innerText = result;
}
}
}
}
// 电话
tel.onblur = function() {
var telValue = tel.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST", "tel.php", true);
var param = "tel=" + telValue;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置请求体信息,仅适用于post
xhr.send(param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var result=xhr.responseText;
// console.log(result);
show03[0].innerText=result;
}
}
}
}
}
</script>
</head>
<body>
<div class="box">
用户名：<input type="text" name="username" id="username" value="" />
<span class="show01">
</span>
<br><br>
邮箱：<input type="email" name="email" id="email" value="" />
<span class="show02">
</span>
<br><br>
电话：<input type="tel" name="tel" id="tel" value="" />
<span class="show03">
</span>
</div>
</body>
</html>