Jquery+PHP實現簡單的前後臺數據交互實現註冊登錄，添加留言功能
阿新 • • 發佈：2017-06-19
.html 獲取系統時間 沒有 username explode 註冊賬號 trap ++ 方法
頁面樣式應用了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>
註冊賬號的後臺處理代碼：
<?php
header("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";
}
登錄賬號的後臺處理代碼：
<?php
header("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>
添加評論的後臺處理代碼：
<?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];
//將數組存為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";
}
將留言內容展示到前臺頁面的後臺處理代碼：
<?php
header("Content-Type:text/html;charset=utf-8");
//獲取文件內的內容
echo file_get_contents("note.txt");
Jquery+PHP實現簡單的前後臺數據交互實現註冊登錄，添加留言功能