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

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

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

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

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

給幾個input添加name

接下來開始寫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就可以跳轉頁面了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！