简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 使用Ajax验证表单数据;使用Ajax制作选项卡（要熟练掌握ajax的基本用法）2019年5月15日20点
Blogger Information
Blog 49
fans 1
comment 0
visits 45186
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用Ajax验证表单数据;使用Ajax制作选项卡（要熟练掌握ajax的基本用法）2019年5月15日20点
Nick的博客
Original
534 people have browsed it

使用Ajax验证表单数据：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" method="post" onsubmit="return false">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="example@gmail.com">
        <span style="color: red" id="error_email">*</span>
    </p>
    <p>
        <label for="password">密码: </label>
        <input type="password" id="password" name="password" placeholder="不少于6位">
        <span style="color: red" id="error_psw">*</span>
    </p>
    <p>
        <button id="submit" type="button">提交</button>
        <span id="result"></span>
    </p>
</form>


<!--
为了submit和ajax提交是二个完全不同的进程, 一个同步一个异步
在异步Ajax提交表单时, 为防止表单默认submit行为,有如下几种方案.
1. 最简单: button type="button", 默认的是type="submit"
2. form标签添加 onsubmit="return false", 禁用表单提交
3. JS中使用submit()方法
-->


<script>
    // 获取必要的元素,以及提示信息的占位符元素
    var login = document.forms.namedItem('login');
    var submit = document.getElementById('submit');
    var error_email = document.getElementById('error_email');
    var error_psw = document.getElementById('error_psw');
    var result = document.getElementById('result');

    // 为提交按钮设置点击事件, 并分配一个事件响应函数(只需要名称即可)
    submit.addEventListener('click', checkUser, false);

    // 主函数: 定义提交事件函数, 内部会调用二个子函数,完成主要功能
    function checkUser() {

        // 1.数据非空验证
        var user = isEmpty(login, error_email, error_psw);

        // 2. Ajax异步验证
        // 如果非空验证返回false,说明验证失败, 就不必再到服务器进行Ajax验证了, 直接返回false
        // 否则就将需要验证的数据(对象字面量user)做为参数,调用异步验证器: verfiy()
        return user ? verfiy(user, result) : false;
    }

    /*****************************************************************/

    // 非空验证函数
    function isEmpty(form, error1, error2) {
        // 获取表单控件中的内容,并清空前后空格
        var email = form.email.value.trim();
        var password = form.password.value.trim();

        // 先验证邮箱,再验证密码,并正确的设置焦点与返回值
        if (email.length === 0) {
            error1.innerText = '邮箱不能为空';
            login.email.focus();
            return  false;
        } else if (password.length === 0){
            error2.innerText = '密码不能为空';
            login.password.focus();
            return  false;
        }

        // 非空验证通过, 则返回邮箱与密码组成的对象字面量,方便后续代码调用
        return {
            email: email,
            password: password

        }
    }

    /*****************************************************************/

    function verfiy(user, result) {
        //1.创建request对象
        var request = new XMLHttpRequest();

        //2.监听响应状态
        request.onreadystatechange = function(){
            if (request.readyState === 4) { // 准备就绪
                console.log(request.responseText);
                // 设置验证提示
                result.innerHTML = request.responseText;
                // 验证通过的跳转功能, 需要使用JSON来实现
            }

            return false;
        };

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

        //4. 设置头信息,将内容类型设置为表单提交方式(固定模板语法结构)
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //4.发送请求
        // 准备要提交的数据
        var data = 'email=' + user.email + '&password=' + user.password;
        request.send(data);
    }

    // input: 当用户修改错误数据时, 提示信息应该消失
    login.email.addEventListener('input', function (){
        error_email.innerText = ''; // 清除邮箱错误提示
        result.innerText = '';  // 清除服务器返回的验证提示
        }, false);
    login.password.addEventListener('input', function (){
        error_psw.innerText = '';  // 清除密码错误提示
        result.innerText = '';  // 清除服务器返回的验证提示
        }, false);

</script>
</body>
</html>

运行实例 »

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


最终显示效果：ajax验证表单数据.png



使用ajax制作选项卡：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        h2 {
            text-align: center;
        }
        .box {
            width: 538px;
            height: 500px;
            background-color: white;
            border: 1px solid #ccc;
            margin: 20px auto;
            color: #363636;
        }
        .box > ul {
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            /*border-bottom: 1px solid #ccc;*/
            overflow: hidden;
        }
        .box > ul li {
            list-style-type: none;
            width: 90px;
            height:36px;
            float:left;

            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;


            text-align: center;
            line-height: 36px;
        }
        .box ul + span {
            float:right;
            width:90px;
            height: 36px;
            line-height: 36px;
            margin-top: -36px;
        }
        .box ul + span >a {
            color: #696969;
            text-decoration: none;
        }

        .box li.active {
            background-color: #fff;
            font-weight: bolder;
            border-bottom: none;

            border-top: 3px solid orangered;
        }

        .box div {
            display: none;
        }

        .box div ul {
            margin: 0;
            padding: 10px;

            list-style-type: none;
        }

        .box div ul li {
            line-height: 1.5em;
            /*background-color: yellow;*/
        }

        .box div ul li a {
            color: #636363;
            text-decoration: none;
        }
        .box div ul li a:hover {
            color: #000;
        }

        .box div ul li  span {
            float: right;
            color: red;

        }

    </style>
</head>
<body>
<!-- 掌握循环操作 -->
<h2>仿PHP中文网选项卡</h2>
<div class="box">

    <ul>
        <!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
        <li class="active">技术文章</li>
        <li>网站源码</li>
        <li>原生手册</li>
        <li>推荐博文</li>
    </ul>
    <span><a href="">更多下载>></a></span>

    <!-- 其实你在页面中看到列表,其实都已经在页面中了,只是隐藏了起来,实际开发过程,大多是通过Ajax请求来动态获取 -->
    <div style="display: block;">

    </div>

    <div>

    </div>

    <div>

    </div>
    <div>

    </div>
</div>

<script>
    // 获取标签

    // 这里获取页面元素的对象是有步骤和技巧的,要注意
    // 首先用document对象的getElementsByClassName()方法来根据标签的class属性来获取
    // 因为class可以获取到页面中多个对象,所以后面加上[0],确保仅获取到第一个class='box'的元素
    var box = document.getElementsByClassName('box')[0];
    // console.log(box);

    //注意:元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
    //刚才已经获取到了box对象,现在我们直接以box为父级对象,再次调用getElementsByTagName()
    //该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素
    var ul =document.getElementsByTagName('ul')[0];
    // console.log(ul);

    //这行代码的原理也上面是一样的
    var tab = ul.getElementsByTagName('li');
    // console.log(tab);


    //获取到页面全部的信息列表,当然返回的也是一个数组喽
    var list = box.getElementsByTagName('div');
    // console.log(list);


    // alert(tab.length) //选项卡的数量
    //给每一个选项卡添加事件,因为有四个选项卡,所以要用到循环
    //用循环添加检测用户的鼠标点击
    for (var i = 0; i< tab.length; i++) {

        //这一步非常关键:为当前的选项卡添加自定义属性index
        //思考: 为什么不直接添加到li标签中,而写在js代码中?
        //解答:因为html页面渲染的时候,有可能过滤掉用户自定义属性,所以我们要用js动态添加
        //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
        //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
        //思考:为什么我们获取当前用户点击的选项卡的序号呢?
        //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
        tab[i].index = i;//i变量等于自定义排序号，用来确认用户点击标签后该显示那个列表


        //这段循环是用来清空当前用户的所有操作
        //思考:为什么要这样？
        //因为当前仅允许一个选项卡高亮显示,其它的不能显示
        //并且对应的信息列表也仅允许显示一个
        //所以必须在每一次操作之前,必须将前一次的行为全部清空初始化:
        //添加点击事件
        tab[i].addEventListener('click',getData, false);
    }

    //添加点击函数
    function getData() {
        //清空标签的样式并将当前对列表隐藏
        for (i = 0; i<tab.length; i++) {
            //将除了当前列表卡外的列表全部清空
            tab[i].className = '';

            //将除了当前列表卡外的列表全部隐藏
            list[i].style.display = 'none';
        }
        //为每个被点击的标签显示样式一样为高亮
        this.classList.add('active');


        //将对应的信息列表显示出来:直接修改其display属性为block即可
        //为什么这里要在属性display之前添加style?
        //因为style属性在html标签中,是一个复合属性,它的值是一系列用分号隔开的字符串
        //也就是style是一个对象,所以要加点语法才可以对内部的子属性进行访问或设置
        list[this.index].style.display = 'block';//将列表显示出来


        // 用ajax方式获取与当前页面对应的数据
        //创建一个临时变量
        var n = this.index;

        //ajax请求
        var request = new XMLHttpRequest();
        //监听函数
        request.onreadystatechange = function (ev) {
            if (request.readyState === 4) {
                list[n].innerHTML = request.responseText;
            }
        };
        // 获取
        request.open('get', 'data.php?p=' + n, true)

        // 发送
        request.send(null);
    }

    //模拟机器人点击操作，获取默认页数据，这里假定默认页为第一页
    //假定一个是默认的标签页
    var defaultTab = ul.firstElementChild;//获取第一个标签页

    //添加点击事件
    defaultTab.addEventListener('click', show ,false);

    //实例化一个事件
    var event = new Event('click');

    // 将事件click分配/派发给指定的元素, 注意, 这里不需要用户参与,会自动执行, 相当于用户选择了首页
    defaultTab.dispatchEvent(event);

    //创建show事件函数
    function show() {
        // 复写ajax
        var request = new XMLHttpRequest;
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                list[0].innerHTML = request.responseText;
            }
        };
        request.open('get', 'data.php&p=' + 0, true);
        request.send(null);
    }

</script>
</body>
</html>

运行实例 »

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



最终显示效果：

选项卡.png

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！