博客列表 >表单的Ajax验证-2019年1月18日

表单的Ajax验证-2019年1月18日

的博客
的博客原创
2019年01月21日 17:47:39512浏览

Ajax: 用户与服务器之间进行异步交互,是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞

所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现

实现AJAX异步处理一般分为5个步骤(POST)

1. 创建ajax请求对象

var request = new XMLHttpRequest();

2. 请求成功的回调处理

request.onreadystatechange = function () {

    // 当请求完成(4)并成功的获取到了数据(200)    

    if (this.readyState === 4 && this.status === 200) {

        // 更新提示信息              

        tips.innerHTML = this.responseText;

    }

}

3. 设置请求参数

request.open('POST', 'admin/check01.php', true);//第三个参数true为是否开启异步,默认为true

4. POST请求需要设置请求头信息

request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//为POST异步请求的固定格式

5. 发送请求

request.send('email=' + email.value + '&password=' + password.value);

Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax原理与应用</title>
</head>

<body>
    <!-- 
        1. Ajax: 用户与服务器之间进行异步交互
        2. 同步: 所有操作按事先约定的步骤进行,前面工作未完成,后面工作不能开始,遇到执行时间过长的操作,会千万阻塞
            例如传统的表单提交,在等待服务器处理结果返回之前,用户只能等待
        3. 异步: 所有操作放到队列中,前一个操作不必等到执行结果,后一个操作就可以开始,前一操作执行完成后通过事件通知调用者即可
            所以, 异步是基于事件机制的, 并通过事先设置的回调函数来处理响应数据, 不会形成阻塞
        
        4. 同步与异步的根本区别在于: 请求发出后, 是否需要等待结果, 必须等待结果就是同步, 不用等待继续执行就是异步

        5. Ajax: 执行异步操作最有用的工具,可以代理用户的请求,并对执行结果进行回调处理,例如局部刷新,非阻塞验证等

        6. 所有Ajax操作,都是通过一个: XMLHttpRequest 对象来实现
     -->

    <!-- 下面以异步表单验证为例,学习Ajax -->

    <!-- check.php: 传统的同步方式处理 -->
    <!-- check01.php: Ajax异步处理 -->

    <h2>用户登录</h2>
    <form action="admin/check01.php" method="POST">
        <p>
            <label for="email">邮箱:</label>
            <input type="email" name="email">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" name="password">
        </p>

        <p>
            <button>登录</button>
            <!-- 占位符:显示提示信息 -->
            <span id="tips" style="color:red"></span>
        </p>
    </form>

    <!-- 异步Ajax验证 -->
    <script>
        // 获取表单对象与控件
        var login = document.forms['login'];
        var email = document.getElementsByName('email')[0];
        var password = document.getElementsByName('password')[0];
        var btn = document.getElementsByTagName('button')[0];
        var tips = document.getElementById('tips');


        // 验证邮箱

        email.onblur = function () {
            //1. 创建ajax请求对象
            var request = new XMLHttpRequest();

            //2. 请求成功的回调处理
            request.onreadystatechange = function () {
                // 当请求完成(4)并成功的获取到了数据(200)    
                if (this.readyState === 4 && this.status === 200) {
                    // 更新提示信息               
                    tips.innerHTML = this.responseText;
                }
            }

            //3. 设置请求参数
            request.open('POST', 'admin/check01.php', true);

            //4. POST请求需要设置请求头信息
            request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

            //5. 发送请求
            request.send('email=' + email.value + '&password=' + password.value);

        }

        // 用户修改信息时,清空提示信息
        email.oninput = function () {
            tips.innerHTML = '';
        }


        // 验证密码
        password.onblur = function () {
            //1. 创建ajax请求对象
            var request = new XMLHttpRequest();

            //2. 请求成功的回调处理
            request.onreadystatechange = function () {
                // 当请求完成(4)并成功的获取到了数据(200)    
                if (this.readyState === 4 && this.status === 200) {
                    // 更新提示信息               
                    tips.innerHTML = this.responseText;
                }
            }

            //3. 设置请求参数
            request.open('POST', 'admin/check01.php', true);

            //4. POST请求需要设置请求头信息
            request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

            //5. 发送请求
            request.send('email=' + email.value + '&password=' + password.value);

        }

        // 用户修改信息时,清空提示信息
        password.oninput = function () {
            tips.innerHTML = '';
        }



        // 上面的邮箱和密码的验证有很多重复代码, 可以通过将公共代码封装到函数用,实现代码复用,请自己完成



        btn.onclick = function () {
            if (email.value.length > 0 && password.value.length > 0) {
                tips.innerHTML = '登录成功,正在跳转...';

                setTimeout(function () {
                    location.href = 'admin/index.php';
                }, 2000);
            } else {
                tips.innerHTML = '邮箱和密码不能为空';
            }



            return false;
        }
    </script>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

check01.php

实例

<?php

// print_r($_POST);

$email = empty($_POST['email']) ? '' : $_POST['email'];

$password = empty($_POST['password']) ? '' : $_POST['password'];

$emailList = ['admin@php.cn', 'peter@php.cn'];

if (empty($email)) {
    echo '邮箱不能为空';
} elseif (!in_array($email, $emailList)) {
    echo '新用户,请先注册 <a href="http://demo.io/admin/register.php">注册</a>';
} elseif (empty($password)){
    echo '密码不能为空';
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议