ajax 做登錄實現頁面免刷新 @ 互聯網

文章出處

結合之前學的知識，可以用ajax來傳遞數據，實現頁面不用刷新，僅數據刷新，來看一下ajax是怎么來實現頁面免刷新的

方的是客戶端，圓的是服務器

如果沒有ajax的話，客戶端直接把數據傳給服務器，服務器再解析數據，把數據傳回客戶端，客戶端要刷新頁面才能顯示

如果用ajax的話，就多了個處理頁面，在客戶端的代碼部分還會有腳本語言，由js把數據傳給處理頁面，處理頁面再傳給服務器，服務器解析后再返回處理頁面，處理頁面返給js，最后由js更改要變動的數據，并不會刷新頁面

先來舉個簡單的例子

html部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="../Jquery/jquery-1.11.2.min.js"></script>
</head>

<body>

<input type="text" id="uid" />
<span id="tishi"></span>

</body>

js部分

<script type="text/javascript">

$("#uid").blur(function(){     //失去焦點觸發
        //取用戶名
        var uid = $(this).val();
        //查數據庫,調ajax
        $.ajax({
                url: "testchuli.php",//處理頁面的地址
                data:{u:uid}, //要傳遞的數據（提交）
                type:"POST", //提交方式
                dataType:"TEXT", //返回數據格式
                success:function(data){ //回調函數
                        var str = "";
                        if(data.trim()=="OK")
                        {
                            str = "該用戶名可用";
                            $("#tishi").css("color","green");
                        }
                        else
                        {
                            str = "該用戶名已存在";
                            $("#tishi").css("color","red");
                        }
                        $("#tishi").text(str);
                    }
            });
    })

</script>

ajax部分是用js來完成的，而它的處理頁面是通過php代碼來完成的

在上面的代碼中有一個trim()方法，這個方法是用來去除前后空格的，避免處理頁面因為有空格而出錯

再來看一下它的處理頁面，也就是"testchuli.php" 頁面

 <?php
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();

$uid = $_POST["u"];
$sql = "select count(*) from users where uid='{$uid}'";

$attr = $db->Query($sql);

if($attr[0][0]>0)
{
    echo "NO";
}
else
{
    echo "OK";
}

上面那就sql語句的意思是，根據傳過來的用戶名，來查詢這張表的數量

來看一下運行的結果

輸入數據庫內已有的用戶名

會顯示該用戶名已存在

再改一下

用戶名可以用

然后再來用ajax做登錄頁面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="../Jquery/jquery-1.11.2.min.js"></script>
</head>

<body>

<div>賬號：<input type="text" id="uid" /></div>
<div>密碼：<input type="password" id="pwd" /></div>
<input type="button" value="登錄" id="btn" />
</body>

<script type="text/javascript">

$("#btn").click(function(){
        //取用戶名和密碼
        var uid = $("#uid").val();
        var pwd = $("#pwd").val();
        
        //調AJAX
        $.ajax({
                url:"logincl.php",
                data:{u:uid,p:pwd},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                        if(data.trim()=="OK")
                        {
                            window.location.href="test.php";
                        }
                        else
                        {
                            alert("用戶名或密碼錯誤");
                        }
                    }
            });
    })

</script>

再來寫它的處理頁面

<?php
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$uid = $_POST["u"];
$pwd = $_POST["p"];

$sql = "select pwd from users where uid='{$uid}'";
$attr = $db->Query($sql);
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd)
{
    echo "OK";
}
else
{
    echo "NO";
}