標籤：rar end reload 方便 position padding date required users
頁面樣式應用了BootStrap架構。
首先看登入頁（登入頁用於帳號登入，也可以跳轉到註冊帳號頁）：
<!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"){//跳轉到?後帶userName參數的index頁location = "index.php?name="+$("input[name=‘userName‘]").val();}else{alert("使用者名稱或密碼錯誤！！！");}});});});</script></html>
註冊帳號的前台頁面：
<!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" required="required"/></div><div class="form-group"><label>密碼</label><input type="password" class="form-control" name="pwd" required="required"/></div><div class="form-group"><label>確認密碼</label><input type="password" class="form-control" name="pwd" required="required"/></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>
註冊帳號的幕後處理代碼：
<?phpheader("Content-Type:text/html;charset=utf-8");//接收了前台資料$str=$_POST["formData"];list($userName,$pwd,$rePwd)=explode("&", $str);if(strlen($userName)>9&&strlen($pwd)>4&&$rePwd==$pwd){echo "true";$str.="[;]";
//為了方便，此處將註冊資訊存入一個use.txt檔案中，沒有涉及資料庫的相關操作，下文存放資料的方式也是如此file_put_contents("user.txt", $str,FILE_APPEND);}else{echo "false";}
登入帳號的幕後處理代碼：
<?phpheader("Content-Type:text/html;charset=utf-8");$str = $_POST["formData"];list($userName,$pwd) = explode("&", $str);$users = file_get_contents("user.txt");$userArr = explode("[;]", $users);foreach ($userArr as $user) {list($realName,$realPwd) = explode("&", $user);if($userName==$realName&&$pwd==$realPwd){echo "true";die();}}echo "false";
登入成功後的首頁：
<!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();//判斷地址欄name參數是否為空白，如果為空白，則返回登入頁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("留言失敗！原因不明！");}});});});//擷取note.txt檔案內的留言資訊且展示在前台頁面的方法function getData(){$.post("doShowNote.php",function(data){//用[;]將data字串分隔為數組var arr = data.split("[;]");//刪除數組最後為空白的項arr.pop();for (var i=0;i< arr.length;i++) {//將每個json字串對象轉化為JS對象var thisNote = $.parseJSON(arr[i]);var div = "<br/><div id=‘div"+i+"‘>使用者名稱："+thisNote.userName+" 發布時間："+thisNote.time+"<br/><br/> 留言內容："+thisNote.noteVal+"</div><br/><hr>"//在留言板div插入新產生的div$("#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>
添加評論的幕後處理代碼：
<?phpheader("Content-Type:text/html;charset=utf-8");$userName = $_POST["userName"];$time = $_POST["time"];$noteVal = $_POST["noteVal"];//將前台擷取到的資訊存為關聯陣列$arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal];//將數組存為json對象形式{"userName":$userName,"time":$time,"noteVal":$noteVal}$str = json_encode($arr);//將$str存入note.txt檔案中$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");
Jquery+PHP實現簡單的前後台資料互動實現註冊登入，添加留言功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
