作业-2019-05-22

$.get()

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get()方法</title>
</head>
<body>
    <h3>江湖门派查询系统$.get()</h3>
    <label for="school">请选择:</label>
    <select name="school" id="school"></select>
    <p id="detail"></p>

    <script src="static/js/jquery-3.4.1.js"></script>
    <script>
        $.get('inc/school.php',function(data,status){
            if (status === 'success') {
                $('#school').html(data);
            }
        });

        //更改选择时执行
        $('#school').on('change',getData);

        function getData(event) {
            console.log(event);
            $.get(
                'inc/detail.php',
                {key:$(event.target).val()},

                function (data,status) {
                    if (status === 'success') {
                        $('#detail').html(data);
                        $('[value=""]').remove()
                    } else {
                        $('#detail').html('<span style="color:red">请求数据</span>');
                    }

                }
            )
        }

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

运行实例 »

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

$.post()

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()</title>
</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 src="static/js/jquery-3.4.1.js"></script>
<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 {
            checkUser()
        }
    }


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

            // 要发送到服务器上的数据
            // 查询字符串形式的数据
            // 'email='+$('#email').val()+'&password='+$('#password').val(),
            // 对象字面量形式,最终也会转为查询字符串
            {
                email: email.val(),
                password: password.val()
            },
            // 请求成功的回调
            function(data) {
                // console.log(data,status,xhr);  // 查看返回的数据
                // 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取
                console.log(data);
                if (data.status === 1) {
                    $('button')     // 选择当前按钮
                        .after('<span style="color: green"></span>')    // 在按钮后添加一个<span>用来显示提示信息
                        .next()     // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
                        .html(data.message) // 设置<span>中的文本内容
                        .fadeOut(2000);     // 将<span>的内容2秒后淡出
                } else {
                    $('button')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(2000);
                }
            },
            'json'  // 返回的数据类型
        );
    }

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

运行实例 »

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

$.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="static/js/jquery-3.4.1.js"></script>
<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 {
            checkUser()
        }
    }



    function checkUser() {
        $.ajax({
            // 1. 请求类型
            type: 'POST',

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

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

            // 4. 请求成功后的回调处理
            success: function(data) {
                if (data.status === 1) {
                    $('button')     // 选择当前按钮
                        .after('<span style="color: green"></span>')    // 在按钮后添加一个<span>用来显示提示信息
                        .next()     // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
                        .html(data.message) // 设置<span>中的文本内容
                        .fadeOut(2000);     // 将<span>的内容2秒后淡出
                } else {
                    $('button')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(2000);
                }
            },

            // 5. 期望服务器返回的数据类型, 可选
            dataType: 'json'

        })
    }
</script>
</body>
</html>

运行实例 »

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

总结

$.get():用于从服务器上读取内容
$.post(): 用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式;

实例

实例

实例

相关文章