Jquery+PHP实现简单的前后台数据交互实现注册登录，添加留言功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery+PHP实现简单的前后台数据交互实现注册登录，添加留言功能相关的知识，希望对你有一定的参考价值。
页面样式应用了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实现简单的前后台数据交互实现注册登录，添加留言功能的主要内容，如果未能解决你的问题，请参考以下文章
ECharts PHP MySQL Ajax JQuery 实现前后端数据可视化