知问前端——Ajax登录

本文，将使用Ajax登录。

一、服务器端代码

is_user.php：

<?php
    require 'config.php';

    $query = mysql_query("SELECT name FROM user WHERE name='{$_POST['user']}'")
    or die('SQL 错误！');

    if (mysql_fetch_array($query, MYSQL_ASSOC)) {
        echo 'false';
    } else {
        echo 'true';
    }

    mysql_close();
?>

login.php：

<?php
    require 'config.php';

    $_pass = sha1($_POST['login_pass']);

    $query = mysql_query("SELECT name,pass FROM user WHERE
    name='{$_POST['login_user']}' AND pass='{$_pass}'") or die('SQL 错误！');

    if (mysql_fetch_array($query, MYSQL_ASSOC)) {
        echo 'true';
    } else {
        echo 'false';
    }

    mysql_close();
?>

注意：jquery.validate.js插件获取时是以UTF-8无BOM格式编码的，而我们的php文件是以ANSI/UTF-8格式编码的，所以在部分环境下，要设置UTF8无BOM格式编码的，否则验证无法提醒。

二、登录部分的代码

html代码：

<form id="login" title="会员登录">
    <ol class="login_error"></ol>
    <p>
        <label for="user">账号：</label>
        <input type="text" name="login_user" class="text" id="login_user"></input>
        <span class="star">*</span>
    </p>
    <p>
        <label for="pass">密码：</label>
        <input type="password" name="login_pass" class="text" id="login_pass"></input>
        <span class="star">*</span>
    </p>
    <p>
        <input type="checkbox" name="expires" id="expires" checked="checked"></input>
        <label for="expires">登录后有效期一周</label>
    </p>
</form>

jQuery代码：

//登录
$("#login_a").click(function() {
    $("#login").dialog("open");
});

$("#login").dialog({
    autoOpen:false,
    modal:true,
    resizable:false,
    width:320,
    height:240,
    buttons:{
        '登录':function() {
            //alert($("#expires").is(":checked"));
            $(this).submit();
        }
    }
}).validate({ //jquery.validate.js插件获取时是以UTF-8 无BOM格式编码的，而我们的php文件是以ANSI/UTF-8格式编码的

    submitHandler:function(form) {
        //alert("验证成功，准备提交中！");
        $(form).ajaxSubmit({
            url:"login.php",
            type:"post",
            beforeSubmit:function(formData,jqForm,options) {
                //提交之前，将“数据正在交互中...”对话框打开
                //打开之后，高度又默认增加了30，所以在初始化dialog时，height应-30，变为50
                $("#loading").dialog("open");

                //alert($("#reg").dialog("widget").html());
                //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
                //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
                $("#login").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按钮
            },
            success:function(responseText,statusText) {
                //alert(responseText); //新增成功，返回1
                if(responseText) {
                    $("#login").dialog("widget").find("button").eq(1).button("enable");
                    $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("用户登录成功...");

                    //登录后有效期一周复选框被选中
                    //就设置cookie的过期时间为7天
                    if($("#expires").is(":checked")) {
                        $.cookie("user", $("#login_user").val(),{
                            expires:7
                        });
                    } else {
                        $.cookie("user", $("#login_user").val());
                    }

                    setTimeout(function() {
                        $("#loading").dialog("close");
                        $("#login").dialog("close");
                        $("#login").resetForm(); //重置表单
                        $("#login span.star").html("*").removeClass("succ");
                        $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");

                        $("#member, #logout").show();
                        $("#reg_a, #login_a").hide();
                        $("#member").html($.cookie("user"));
                    }, 1000);
                }
            }
        });
    },
    //错误提示出现，对话框高度增加，出现滚动条，所以应去除滚动条
    //每次激活错误，都会触发此属性
    showErrors:function(errorMap, errorList) {
        var errors = this.numberOfInvalids();
        if(errors > 0) {
            $("#login").dialog("option","height",errors * 20 + 240);
        } else {
            $("#login").dialog("option","height",240);
        }
        this.defaultShowErrors(); //执行默认错误
    },
    //高亮显示有错误的元素，变色式
    highlight:function(element,errorClass) {
        $(element).css("border","1px solid #630");
        $(element).parent().find("span").html("*").removeClass("succ");
    },
    //恢复默认
    unhighlight:function(element,errorClass) {
        $(element).css("border","1px solid #ccc");
        //element即为<input>控件
        //$(element).parent().find("span").html("ok");
        $(element).parent().find("span").html("&nbsp;").addClass("succ");
    },
    errorLabelContainer:"ol.login_error",
    wrapper:"li",
    rules:{
        login_user:{
            required:true,
            minlength:2,
        },
        login_pass:{
            required:true,
            minlength:6,
            remote:{
                url:"login.php",
                type:"post",
                data:{
                    login_user:function() {
                        return $("#login_user").val();
                    }
                }
            }
        }
    },
    messages:{
        login_user:{
            required:"账号不得为空！",
            minlength:"账号不得小于{0}位！",
        },
        login_pass:{
            required:"密码不得为空！",
            minlength:"密码不得小于{0}位！",
            remote:"账号或密码不正确！"
        }
    }
});