Blogger Information
Blog 38
fans 1
comment 0
visits 24246
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
5月22日作业:阿贾克斯$.ajax()表单验证案例
鲨鱼辣椒的博客
Original
883 people have browsed it

ajax() 方法用于执行 AJAX(异步 HTTP)请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax()</title>
</head>
<body>
<h3>用户登录$.ajax()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button id="submit">提交</button></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    var email = $('#email');
    var password = $('#password');
    var btn = $('#submit');

    //给btn 按钮添加点击事件
    btn.on('click',isEmpty);

    function isEmpty() {
        if (email.val().length === 0){
            email.after('<span style="color: red;">邮箱不能为空</span>').next().fadeOut(2000);
            email.focus();
            return false;
        }else if (password.val().length === 0) {
            password.after('<span style="color: red">密码不能为空</span>').next().fadeOut(2000);
            password.focus();
            return false;
        }else if (password.val().length < 6) {
            password.after('<span style="color: red">密码不能少于6位</span>').next().fadeOut(2000);
            password.focus();
            return false;
        }else{
            checkUser1()
        }
    }

    function checkUser() {
        $.post(
            //POST请求的php脚本
            'inc/check.php',

            // 要发送到服务器上的数据
            // 查询字符串形式的数据
            // 'email='+$('#email').val()+'&password='+$('#password').val(),
            // 对象字面量形式,最终也会转为查询字符串
            {
                email: email.val(),
                password: password.val()
            },
            //请求成功的回调
            function (data) {
                // console.log(data,status,xhr);  // 查看返回的数据
                // console.log(data);
                if (data.status === 1){
                    $('button').after('<span style="color: green"></span>')
                        .next().html(data.message).fadeOut(2000);
                }else {
                    $('button')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(2000);
                }
            },
            'json'
        )
    }
    
    function checkUser1() {
        // $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握
        $.ajax({
            // 1.请求类型
            type: 'POST',

            //2.请求的URL地址
            url: 'inc/check.php',

            // 3.需要发送到服务器上的数据,以对象方式
            data: {
                email:email.val(),
                password: password.val()
            },

            //请求成功后回调处理
            success: function (data) {
                if (data.status === 1){
                    $('button').after('<span style="color: green"></span>').next().html(data.message).fadeOut(2000);
                }else {
                    $('button').after('<span style="color: red"></span>').next().html(data.message).fadeOut(2000);
                }
            },

            dataType: 'json'


        })
    }

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

运行实例 »


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



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