前端後台的互動的一個實例分享

　　這一週呢，本K在大神的指導下，完成了一個利用ajax與php檔案上傳處理結合的一個留言板功能的小實例，下面就讓本K來帶大家瞅瞅如何實現這一種功能。

一、介面概覽

#首先我們來看看這個小demo的具體效果。

這個demo中，主要包括了三個步驟，也分別對應了三個功能，分別是#註冊，登入與留言板功能。而這三個功能基本上都藉助了前後台互動的幾種技術，下面，本K就給大家分別展示一下這三個功能實現的程式碼。

二、功能實作

1、註冊功能與登入功能

1.1 程式碼展示

1.1.1 註冊功能

（1）前段部分

nbsp;html><meta><title>用户注册</title><link><style>body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 350px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -175px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style>
    <div>
<div><div>用户注册</div></div>
<div><form>
<div>
<label>用户名</label><input>
</div>
<div>
<label>密码</label><input>
</div>
<div>
<label>确认密码</label><input>
</div>
<div>
<input>    <a></a>返回登录</div>
</form></div>
</div><script></script><script>$(function(){
            $("#submit").on("click",function(){var str = $("form").serialize();
                console.log(str);
                $.post("doReg.php",{"formData":str},function(data){if(data=="true"){
                        alert("注册成功！即将跳转登陆页！");
                        location = "login.php";
                    }else{
                        alert("注册失败！因为啥我不知道！");
                    }
                });
            });
        });</script>

（2）後台部分

<?phpheader ("Content-Type:text/html;charset=utf-8");    $str = $_POST["formData"]."[;]";    $num = file_put_contents("user.txt", $str,FILE_APPEND);    if($num>0){echo "true";
    }else{echo "false";
    }

（3）使用者資料儲存檔案

userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件，就是后台部分的user.txt

1.1.2 登入功能

（1）前端部分

nbsp;html><meta><title>用户登录</title><link><style>body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 280px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -140px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style>
    <div>
<div><div>用户登录</div></div>
<div><form>
<div>
<label>用户名</label><input>
</div>
<div>
<label>密码</label><input>
</div>
<div>
<input>    <a></a>注册账号</div>
</form></div>
</div><script></script><script>$(function(){
            $("#submit").on("click",function(){var str = $("form").serialize();
                console.log(str);
                $.post("doLogin.php",{"formData":str},function(data){if(data=="true"){
                        location = "index.php?name="+$("input[name=&#39;userName&#39;]").val();
                    }else{
                        alert("用户名或密码错误！！！");
                    }
                });
            });
        });</script>

#（2）後台部分

<?phpheader ("Content-Type:text/html;charset=utf-8");    $str = $_POST["formData"];    list($userName) = explode("&", $str);list(,$pwd) = explode("&", $str);    $users = file_get_contents("user.txt");    $userArr = explode("[;]", $users);    foreach ($userArr as $user) {list($realName) = explode("&", $user);list(,$realPwd) = explode("&", $user);if($userName==$realName&&$pwd==$realPwd){echo "true";die();
        }
    }    echo "false";

 

1.2 功能詳述

　　用戶註冊與登入功能的實現的主要依賴有三個，分別是ajax向後台傳遞資料並接受結果，php後台對ajax發來的資料進行後台處理並回饋結果，使用者資料的接收與儲存（這其實可以化作後台處理部分）。

1.2.1 前端詳述

　　前端部分的主要任務是接收用戶發送的信息並向後台傳遞，而這部分任務的實現主要依靠兩行程式碼。

　　首先我們來看看ajax發送請求這一部分是如何實現的。這一部分功能的實作主要就依賴兩行程式碼。

　　第一行程式碼是  var str = $("form").serialize();  這一行的功能就是將form表單中提交的資料序列化成一字串，具體實作如下圖

　　

　　將form表單中的提交資料序列化是為了後台能夠更好的解析這一部分。

　　而另一行關鍵程式碼就是ajax請求的主體部分，這部分主要讓人比較難搞明白的是接受的# data 參數。 data 參數是ajax請求相對應後台處理完成後，後台給前台反饋的一個信息，就比如說註冊成功以後所返回的true與失敗以後所返回的false。

1.2.2 後台詳述

　　後台對前端傳來資料的處理關鍵在於如何取得、解析傳來的資料。這一部分，PHP給了我們三行程式碼來實作。

　　第一行程式碼： $str = $_POST["formData"]; 透過超全域陣列$_POST 取得前台傳來的序列化好的字串，這就解決了資料的獲取部分。

　　第二行程式碼： file_put_contents("user.txt", $str,FILE_APPEND); PHP提供給我們的file_putt_contents()，讓我們可以將我們所獲得的資料儲存到一個文件中長久保留。

　　第三行程式碼： file_get_contents("user.txt"); 這是PHP提供給我們與file_putt_contents()相對應的資料擷取的方法。

　　依靠以上三行程式碼，再加上我們對資料解析後的處理，我們就可以在後台輕鬆的對整個功能進行實現。

2、留言功能

2.1 程式碼展示

（1）前端部分

nbsp;html><meta><title></title><style>#note{width: 400px;height:100px;}</style><div></div><textarea></textarea><br><input><h1 id="留言内容">留言内容</h1><hr><div></div><script></script><script>$(function(){
            getData();            var userName = &#39;<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>&#39;;if(userName=="null"){
                location = "login.php";
            }
            
            $("#div1").html("欢迎您，<span style=&#39;color:red;&#39;>"+userName+"");
            
            $("#submit").on("click",function(){var noteVal = $("#note").val();if(noteVal==""){
                    alert("留言内容不能为空，请核对！");return;
                }var time = getTime();var note = {"userName":userName,"time":time,"noteVal":noteVal
                }
                
                $.post("doAdd.php",note,function(data){if(data=="true"){
                        alert("留言内容提交成功！");
                        location.reload(true);
                    }else{
                        alert("留言失败！原因不明！");
                    }
                });
                    
            });
        });        function getData(){
            $.post("doShowNote.php",function(data){var arr = data.split("[;]");
                arr.pop();
                console.log(arr);for (var i=0;i< arr.length;i++) {var thisNote = $.parseJSON(arr[i]);var div = "<br/><div id=&#39;div"+i+"&#39;>用户名："+thisNote.userName+"     发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</script>

---

"$("#liuyanban").prepend(div);                 }             })         }        function getTime(){var today  = new Date();var year = today.getFullYear();var month = today.getMonth();var date1  = today.getDate();var hours = today.getHours();var minutes = today.getMinutes()

（2）後台部分

// 笔记的添加<?phpheader ("Content-Type:text/html;charset=utf-8");    $userName = $_POST["userName"];$time = $_POST["time"];$noteVal = $_POST["noteVal"];    $arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal];    $str = json_encode($arr);    $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND);    if($num>0){echo "true";
    }else{echo "false";
    }

// 笔记的展示<?phpheader ("Content-Type:text/html;charset=utf-8");echo file_get_contents("note.txt");

（3）留言資料儲存檔案

// 这也是一个用于存储留言内容等各种信息的TXT文件{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]

2.2 功能詳述

2.1.1 前端部分

　　前端部分的作用無異於登入註冊功能，只不過根據要求多了對當前日期、使用者名稱資料、留言版樣式的取得。

2.1.2 後台部分

　　後台部分其實和登陸註冊的後台實作是一個套路，不過比兩個要多了一步。  json_encode($arr); 這是PHP提供給我們的將陣列轉換成JSON物件格式的方法，這就方便了我們在前端留言數據的回饋獲取。

 

以上就是本K首次在這個星期帶給大家的小功能demo，希望能夠幫到大家，如有錯誤，敬請指正，謝謝您的支持！

 

以上是前端後台的互動的一個實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！