通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

  前  言

 PHP 

    学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下。

具体的内容分析如下:

① PHP中的数据传输-->>由注册页传输给注册页后台-->>注册页后台经过转码保存实例化的文件

② 在登录页输入账户密码,点击登录时,获得触发函数:获得由后台传输过来的true或者false---转换页面或者弹出输入错误。

     登录页后台获取保存账户密码的实例化文件,通过转码,if判断之后传输给前台登录页TURE或者FALSE。

总共总共8个文件:

  其中07_file与libs同一级别 代码植入请看具体内容。

通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

代码注释里面有很详细的解析,如有需要请仔细阅读。(希望可以帮助到你)

1、  效果图
   
   通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
 <!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"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<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(){
//↓定位id:submit事件绑定,click点击时候触犯function函数
$("#submit").on("click",function(){
//↓创建一个变量str = 选取form表单,通过serialize()创建以标准 URL 编码表示的文本字符串
var str = $("form").serialize();
//↓打印出来看看是什么个样子的,传输给后台才好操作。
console.log(str); //具体样子:userName=value&pwd=value
/*通过ajax中的post方法,给后台doLogin.php传输数据,给变量str(url文件类型)添加名字“formData”,
* 函数function是接受后台返回的默认值也就是echo输出的值*/
$.post("doLogin.php",{"formData":str},function(data){
//↓打印后台echo输出的值,查看类型
//↑console.log(data); //↓判断函数如果返回的是true,则通过location打开新的页面,同是在页面后面加?name+你输入的用户名,用来给主页传值(主页获得用户名)
if(data=="true"){
location = "index.php?name="+$("input[name='userName']").val();
//↓传回其他输出则弹出"用户名或密码错误!!!"窗口
}else{
alert("用户名或密码错误!!!");
}
});
});
});
</script>
</html>

iogin.php行内代码--登录页面

 <?php

     header("Content-Type:text/html;charset=utf-8");

     //↓定义str一个变量,通过post方法获得前台传输过来的数据。$_POST["fieldname"]
$str = $_POST["formData"]; //↓打印从前台收到的数据,通过打印传输会前台,具体内容通过形参data表示
//echo $str;
//↑打印$str时↓(下方)必须全部注释,输出的具体样子:userName=value&pwd=value /* php中的数组,先通过数组explode方法-把数据内容通过$分为数组,
↓再定义第一个数组内容(用户名的value)为$userName。["userName=value","pwd=value"]*/
list($userName) = explode("&", $str); /* php中的数组,先通过数组explode方法-把数据内容通过$分为数组,
↓再定义二个数组内容(用户名的value)为$userName。["userName=value","pwd=value"]*/
list(,$pwd) = explode("&", $str); //定义一个变量users,通过php中的文件函数file_get_contents,读取01_lx文件下的user.txt文件内容中的字符串。
$users = file_get_contents("user.txt");//这一步就是从文件中读取账号,密码。
//↑具体的文件内容大概:userName=111&pwd=111&rePwd=111[;]userName=222&pwd=222&rePwd=222[;]
//↑通过上面的文件内容可以知道每个账号密码后面都有一个[;] //↓定义一个变量userArr,通过explode函数把用变量users内容用[;]分为数组 ["userName=value","pwd=value"]
$userArr = explode("[;]", $users); //通过foreach遍历整个$userArr数组
foreach ($userArr as $user) { //每一组$user分别为userName=value(111)&pwd=value(111)&rePwd=value(111)
//↓每一组都分别再通过explode函数分为数组,定义变量$realName为第一个数组名。
list($realName) = explode("&", $user);//具体内容为$realName=userName=value(111)
//↓每一组都分别再通过explode函数分为数组,定义变量$realPwd为第二个数组名。
list(,$realPwd) = explode("&", $user);//具体内容为$realPwd=pwd=value(111)
//↓每一组都分别判断一次,当变量$userName==变量$realName同时满足变量$pwd==变量$realPwd
if($userName==$realName&&$pwd==$realPwd){
//php中的输出echo 内容为true
echo "true";
die();
}
}
//↓如果账户或密码没有输入则,返回false
echo "false";

doLogin行内代码--登录页面后台

 <!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"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
//↑jquery插入代码
<script type="text/javascript">
$(function(){
//↓捕捉idsubmit绑定click事件,function为发生事件时的函数。
$("#submit").on("click",function(){
//↓创建一个变量str,选取form表单,通过serialize()创建以标准 URL 编码表示的文本字符串
var str = $("form").serialize();
//↓打印出来看看是什么个样子的,传输给后台才好操作。
console.log(str); /*↓通过ajax中的post方法,给后台doReg.php传输数据,给变量str(url文件类型)添加名字“formData”,
函数function是接受后台返回的默认值也就是echo输出的值*/
$.post("doReg.php",{"formData":str},function(data){
//↓打印后台echo输出的值,查看类型
//↑console.log(data); //↓判断函数如果返回的是true,则弹窗提示创建成功,通过location跳转到login.php(登录页面)。
if(data=="true"){
alert("注册成功!即将跳转登陆页!");
location = "login.php";
//返回其他值,则弹窗提示 "注册失败!因为啥我不知道!"
}else{
alert("注册失败!因为啥我不知道!");
}
});
});
});
</script>
</html>

reg行内代码--注册页面

 <?php

     header("Content-Type:text/html;charset=utf-8");

     /*↓定义str一个变量,通过post方法获得前台传输过来的数据,
并且在每个数据后方加入一个[;]——>用以分隔每个新数据*/
$str = $_POST["formData"]."[;]"; //定义一个变量$num,通过php中的文件函数file_put_contents把每个str数据追加到01_lx文件下面的"user.txt"文件中。
$num = file_put_contents("user.txt", $str,FILE_APPEND);//user.txt文件没有的话会创建新的user.txt文件
//↑FILE_APPEND是追加到文件中,保证每个数据都会追加到"user.txt"文件中。 //↓简单的判断,不做过多的阐述。
if($num>0){
//输出语句,内容为后台返回前台$.post中的function的形参。
echo "true";
}else{
//输出语句,内容为后台返回前台$.post中的function的形参。
echo "false";
}

doReg--注册页面后台

 
 use.txt由文件doReg.php自动在文件夹01_lx中生成。
 
 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
欢迎您,<span style='color:red;'><?php echo $_GET["name"]; ?></span><br>
我是主页! </body>
</html>

index.php--主页代码

上一篇:1968. 买水(h2o)


下一篇:MY IDE