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实现简单的前后台数据交互实现注册登录,添加留言功能的主要内容,如果未能解决你的问题,请参考以下文章

Jquery AJAX 简单实现前台后台互传数据

jquery easyui怎么实现前后台数据的交互

05-Ajax助前后端单飞

ECharts PHP MySQL Ajax JQuery 实现前后端数据可视化

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

使用Jquery.AJAX方法和PHP后台数据交互小结