Ajax验证表单数据和制作选项卡--2019-05-15

使用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="text" id="email" name="email" placeholder="example@gmail.com">
            <span style="color: red"  id="err_email">*</span>
        </P>
        <P>
            <label for="psw">密码:</label>
            <input type="password" id="psw" name="psw" placeholder="不少于6位">
            <span style="color: red"  id="err_psw">*</span>
        </P>
        <button id="submit" type="button">提交</button>
        <span id="result"></span>
    </form>
<script>
    //获取表单对象
    var login = document.forms.namedItem('login');
    var submit = document.getElementById('submit');
    var err_email = document.getElementById('err_email');
    var err_psw = document.getElementById('err_psw');
    var result = document.getElementById('result');

    //点击提交
    submit.addEventListener('click',checkUser,false);

    function checkUser() {
        //检查是否为空
        var user = isEmpty(login,err_email,err_psw);

        return user ? verfiy(user,result) : false;
    }

    function isEmpty(form,err1,err2) {
        //trim()过滤左右空格
        var email = form.email.value.trim();
        var psw = form.psw.value.trim();

        if (email.length === 0 ) {
            err1.innerHTML = '邮箱不能为空!';
            form.email.focus();
            return false;
        } else if (psw.length === 0) {
            err2.innerHTML = '密码必须填写!';
            form.psw.focus();
            return false;
        }

        return {
            email: email,
            psw: psw
        }
    }

    //检验数据
    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;
            }
            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.psw;
        request.send(data);
    }

    login.email.addEventListener('input',function(){
        err_email.innerHTML = '';
        result.innerHTML = '';
    },false);
    login.psw.addEventListener('input',function(){
        err_psw.innerHTML = '';
        result.innerHTML = '';
    },false);


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

运行实例 »

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

3.使用Ajax制作选项卡

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax制作选项卡</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;">
            <ul>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>
                <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>

            </ul>
        </div>

        <div>
            <ul>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>
                <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>

            </ul>
        </div>

        <div>
            <ul>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
                <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>
                <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>

            </ul>
        </div>
    </div>
    <script>
        //先取得box
         var box = document.getElementsByClassName('box')[0];
         //取得box中的ul
         var ul = box.getElementsByTagName('ul')[0];
         //取得ul中的所有li
         var tab = ul.getElementsByTagName('li');
         //取得div
         var list = box.getElementsByTagName('div');


         for (var i=0 ; i<tab.length; i++) {
             //这一步非常关键:为当前的选项卡添加自定义属性index
             //思考: 为什么不直接添加到li标签中,而写在js代码中?
             //解答:因为html页面渲染的时候,有可能过滤掉用户自定义属性,所以我们要用js动态添加
             //tab[i]: 加上序号才可以找到对应的选项卡,添加自定义属性,相当于对对象添加属性,所以使用点语法
             //这里的i,就是当前用户正的点击的选项卡的索引,其实就是当前对象的编号
             //思考:为什么我们获取当前用户点击的选项卡的序号呢?
             //答: 因为选项卡必须要和下面的信息列表list一一对应,所以必须要知道当前用户点击的是哪个?
             tab[i].index = i;
             //为所有li 添加click事件
             tab[i].addEventListener('click',getData,false);
         }

        function getData() {
            for (var i=0 ; i<tab.length ; i++) {
                //将选项卡的所有标签样式全部清空
                tab[i].className ='';
                list[i].style.display = 'none';
          }
            //设置用户当前操作的选项卡为高亮显示
            this.classList.add('active');
            // 将对应的信息列表显示出来:直接修改其display属性为block
            list[this.index].style.display = 'block';
        }
    </script>
</body>
</html>

运行实例 »

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

4.通过本节课程学习到:

元素是可以嵌套的,所以我们除了可以在document对象上调用这些方法外,还可以在元素上调用
该方法是根据标签名来获取元素,因为页面中可以多个同名标签,所以返回的也是一个数组,要加[0]指定元素

Ajax验证表单数据 和制作选项卡--2019-05-15

实例

实例

相关文章