這一周呢，本K在大神的指導下，完成了一個利用ajax與php文件上傳處理相結合的一個留言板功能的小實例，下面就讓本K來帶大家瞅瞅如何實現這一種功能。
一、界面概覽
首先我們來看一下這個小demo的具體效果。
這個demo中，主要包括了三個步驟，也分別對應了三個功能，分別是注冊，登錄與留言板功能。而這三個功能基本都借助了前后台交互的幾種技術，下面，本K就給大家分別展示一下這三個功能實現的代碼。
二、功能實現
1、注冊功能與登錄功能
1.1 代碼展示
1.1.1 注冊功能
（1）前段部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用戶注冊</title> <link rel="stylesheet" type="text/css" href="../libs/bootstrap.css"/> <style type="text/css"> 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> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">用戶注冊</div> </div> <div class="panel-body"> <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"> <label>確認密碼</label> <input type="password" class="form-control" name="rePwd" /> </div> <div class="form-group btns"> <input type="button" class="btn btn-primary" value="確定注冊" id="submit"/> <a type="button" class="btn btn-success" href="login.php"/>返回登錄</a> </div> </form> </div> </div> </body> <script src="../libs/jquery-3.1.1.js"></script> <script type="text/javascript"> $(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> </html>
（2）后台部分
<?php header("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）前端部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用戶登錄</title> <link rel="stylesheet" type="text/css" href="../libs/bootstrap.css"/> <style type="text/css"> 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> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">用戶登錄</div> </div> <div class="panel-body"> <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"/> <a type="button" class="btn btn-success" href="reg.php"/>注冊賬號</a> </div> </form> </div> </div> </body> <script src="../libs/jquery-3.1.1.js"></script> <script type="text/javascript"> $(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='userName']").val(); }else{ alert("用戶名或密碼錯誤！！！"); } }); }); }); </script> </html>
（2）后台部分
<?php header("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）前端部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #note{ width: 400px; height:100px; } </style> </head> <body> <div id="div1"></div> <textarea name="note" id="note"></textarea> <br /> <input type="button" id="submit" value="留言" /> <h1>留言內容</h1> <hr> <div id="liuyanban"> </div> </body> <script src="../libs/jquery-3.1.1.js"></script> <script> $(function(){ getData(); var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>'; if(userName=="null"){ location = "login.php"; } $("#div1").html("歡迎您，<span style='color:red;'>"+userName+"</span>"); $("#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='div"+i+"'>用戶名："+thisNote.userName+" 發布時間："+thisNote.time+"<br/><br/> 留言內容："+thisNote.noteVal+"</div><br/><hr>" $("#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()<10?"0"+today.getMinutes():today.getMinutes(); var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds(); var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds; return dateTime; } </script> </html>
（2）后台部分
// 筆記的添加 <?php header("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"; }
// 筆記的展示 <?php header("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，希望能夠幫到大家，如有錯誤，敬請指正，謝謝您的支持！