Blogger Information
Blog 39
fans 2
comment 2
visits 50575
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第13章 jQuery中的Ajax操作-2018年1·0月10号
fighting的博客
Original
789 people have browsed it

                                                                第13章 jQuery中的Ajax操作-

                                                  时间:2018年1·0月10号             天气:晴

1. 编程1: $.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">
</p>
<p>
    <label for="password">密码:</label>
    <input type="password" id="password" >
</p>
<p>
    <button>登陆</button>
</p>
<script src="lib/jQuery.js"></script>
<script>
    $('button').click(function () {
        if ($('#email').val().length === 0){
            $('#email').after('<span style="color: orangered">邮箱不能为空</span>').next().fadeOut(3000);
            $('#email').focus();
            return false;
        }
        if ($('#password').val().length === 0){
            $('#password').after('<span style="color: orangered">密码不能为空</span>').next().fadeOut(3000);
            $('#password').focus();
            return  false;
        }
        if ($('#password').val().length <6){
            $('#password').after('<span style="color: orangered">密码不少于六位字符</span>').next().fadeOut(3000);
            $('#password').focus();
            return false;
        }
        $.post(
            'inc/check.php',
            {
                email:$('#email').val(),
                password:$('#password').val(),
            },

            function (data) {
                // console.log(data);
                if (data.status === 2){
                    $('#email')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(3000)
                        .focus();
                    $('#email').val("");
                    $('#password').val("");
                    return false;
                }
                if (data.status ===1){
                    $('button')
                        .after('<span style="color: coral"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(3000);
                    return false;
                }else{
                    $('button')
                        .after('<span style="color: black"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(3000);
                    return false
                }

            },
            //响应数据类型
            'json'
        );
    });
</script>
</body>
</html>

运行实例 »

后端代码:

本机运行图:

1.png


Correction status:qualified

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