$.get .post .ajax区别-2019年5月22日20点00分

下面将展示ajax中常用的几种
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()</title>
    <script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<h3>用户登录$.post()</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>

    var email=$('#email');
    var password=$('#password');
    var btn=$('#submit');

    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(
            'inc/check.php',
            {
                email:email.val(),
                password:password.val()
            },
            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);
                }
            },
            'json'

        )

    }
    function checkUser1() {
        $.ajax(
            {
                type:'POST',
                url:'inc/check.php',
                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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例

相关文章
