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

先来一波概念！！！

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

一般的介绍看这里http://www.runoob.com/php/php-ajax-intro.html

慢慢看下面的都是好东西！！！

Ajax入门级别的表单验证：比如输入用户名，重复的话会自动弹出不可用的标识。

可以知道基本的步骤就是下图

1、创建一个对象XMLHttpRequest

var xhr=new XMLHttpRequest();

2、连接到服务器

xhr.open('get/post','文件名',true/false);
第一個看是什麽方式提交數據：get/post;
第二個是看服務器所讀的文件名；
第三個看是否異步傳輸；如我這裏：xhr.open('get','./03.php',true)

3、发送请求

xhr.send();

4、数据返回

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp看连接

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">
    <p>用户名：<input type="text" name="username"><span id="reg"></span></p>
    <p>Email：<input type="text" name="email"></p>
    <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;

效果展示：

直接复制粘贴代码运行下就行了！！！这是简单的ajax表单验证。

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

猜你喜欢