知問前端——Ajax登陸

   本文，將使用Ajax登陸。

   1、服務器端代碼

   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格式編碼的，不然驗證沒法提醒。

   2、登陸部分的代碼

   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:"帳號或密碼不正確！"
        }
    }
});