用PHP和Ajax進行前后台數據交互——以用戶登錄為例

很多網站中都有用戶登錄系統，要完成用戶的注冊和登陸，就一定要用到前后台的數據交互。在這里以簡單的用戶注冊和登陸為例介紹一下前后台交互的大致流程。

 

首先，我們來做一個簡單的登陸界面。

這里為了方便我使用了bootstrap插件

<form class="form-horizontal">
    <div class="form-group">
        <label>用戶名</label>
        <input type="text" class="form-control" name="userName"/>
    </div>
    <div class="form-group">
        <label>密碼</label>
        <input type="password" class="form-control" name="pwd"/>
    </div>
    <div class="form-group btns">
        <input type="button" class="btn btn-primary" value="登錄系統" id="submit"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a type="button" class="btn btn-success" href="reg.php"/>注冊賬號</a>
    </div>
</form>

 

 先做一個注冊的功能，點擊注冊賬號跳轉到注冊的頁面。注冊的頁面跟登錄頁面類似，點擊返回登陸能回到登錄頁。

 給幾個input添加name

<input type="text" class="form-control" name="userName"/>
<input type="password" class="form-control" name="pwd" />
<input type="password" class="form-control" name="rePwd" />
<input type="button" class="btn btn-primary" value="確定注冊" id="submit"/>

 

接下來開始寫JS代碼，點擊注冊按鈕，觸發click事件。

1、我們把form表單傳遞的信息通過serialize()將轉為字符串。

2、通過post()將數據提交給后台處理，第一個參數為提交的文件，第二個參數是傳遞的數據，這里我們寫為對象的形式。

$(function(){
    $("#submit").on("click",function(){
        var str = $("form").serialize();
        $.post("doReg.php",{"formData":str},function(data){
            if(data=="true"){
                alert("注冊成功！即將跳轉登陸頁！");
                location = "login.php";
            }else{
                alert("注冊失敗！因為啥我不知道！");
            }
        });
    });
});

 

然后我們轉到后台腳本

 1、將接收的數據以"[;]"分隔，便於我們到時候分隔字符串。

$str = $_POST["formData"]."[;]";

2、這里我們先將數據寫入一個txt文件，返回新增字段的長度，后期可以將數據保存到數據庫。

$num = file_put_contents("user.txt", $str,FILE_APPEND);

3、 然后給前台發送一個數據，當$num>0說明文件寫入了內容。

if($num>0){
    echo "true";
}else{
    echo "false";
}

 

這樣我們就完成了一個簡單的前后台數據交互。

 

完成注冊以后我們可以回到登陸頁面。

登陸頁面的JS代碼也是類似的

$(function(){
    $("#submit").on("click",function(){
        var str = $("form").serialize();
        $.post("doLogin.php",{"formData":str},function(data){
            if(data=="true"){
                location = "index.php？name="+$("input[name='userName']").val();
            }else{
                alert("用戶名或密碼錯誤！！！");
            }
        });
    });
});

 

接下來我們來進行后台操作

1、首先取到前台發來的數據

$str = $_POST["formData"];

2、然后將接收到的數據按照"&"符號進行分隔，因為我們存入的數據都是中間以&分隔，最后以[;]結尾

list()的用法是可以將分隔之后的各段的字符串分別賦予不同的變量。

list($userName) = explode("&", $str);
list(,$pwd) = explode("&", $str);

3、然后我們要取到存數據的文件

$users = file_get_contents("user.txt");

4、然后將每個用戶區分，這次我們用[;]分隔

$userArr = explode("[;]", $users);

5、然后輸入的登陸信息是不是跟我們文件里注冊的用戶信息一致，一致說明輸入的信息正確，就可以結束腳本並給前台傳回true

foreach ($userArr as $user) {
    list($realName) = explode("&", $user);
    list(,$realPwd) = explode("&", $user);
    if($userName==$realName&&$pwd==$realPwd){
        echo "true";
        die();
    }
}
echo "false";

 

然后在前台判斷如果傳回的是true就可以跳轉頁面了。