PHP+Ajax实现简单的表单验证

代码展示
0 40
csroad
csroad 举报
04月13日 00:43

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>