PHP+Ajax实现简单的表单验证
Ajax入门级别的表单验证：比如输入用户名，重复的话会自动弹出不可用的标识。
可以知道基本的步骤就是下图
1、创建一个对象XMLHttpRequest
var xhr=new XMLHttpRequest();
2、连接到服务器
xhr.open('get/post','文件名',true/false);第一個看是什麽方式提交數據：get/post;
第二個是看服務器所讀的文件名；
第三個看是否異步傳輸；如我這裏：xhr.open('get','./ajax.php',true)
3、 发送请求
xhr.send();
4、数据返回
xhr.onreadystatechange=function () {
if(this.readyState==4){
alert('请求结束了');
//接受后台相应内容
alert('内容是'+this.responseText);
}
}存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
好了介绍完基本的东西：下面开始实例操作！！！
---------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" name="username"><span id="reg"></span></p>
Email：<input type="text" name="email"></p>
<input type="submit" value="注册"></
p>
</form>
</body>
<script>
var user=document.getElementsByName('username')[0];
user.onblur=function () {
//alert(this.value);
var url='./04.php?data='+this.value;
//alert(url);
var reg=document.getElementById('reg');
var xhr=new XMLHttpRequest();
xhr.onreadystatechange =function () {
if(this.readyState==4){
//alert('请求成功');
if(this.responseText==1){
reg.innerHTML='<font color="green">可用</font>'
}else {
reg.innerHTML='<font color="red">不可用</font>'
}
}
}
xhr.open('get',url,true);
xhr.send(null);
}
</script>
</html>
对应的PHP文件里面写的如下：
<?php
/**
* Created by PhpStorm.
* User: Puppet Angel
* Date: 2018/10/19
* Time: 10:16
*/
$data=$_GET['data'];
//$sql='select
$users=array('帅哥','美女','野兽');
echo in_array($data,$users)?0:1;</code></pre>
