通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言
PHP
学习了好久的PHP，今天做一个可以后台交互的登录页和注册页，没做什么判断，简单的了解一下。
具体的内容分析如下：
① PHP中的数据传输-->>由注册页传输给注册页后台-->>注册页后台经过转码保存实例化的文件
② 在登录页输入账户密码，点击登录时，获得触发函数：获得由后台传输过来的true或者false---转换页面或者弹出输入错误。
登录页后台获取保存账户密码的实例化文件，通过转码，if判断之后传输给前台登录页TURE或者FALSE。
总共总共8个文件：
其中07_file与libs同一级别 代码植入请看具体内容。
代码注释里面有很详细的解析，如有需要请仔细阅读。（希望可以帮助到你）
| 1、 效果图 |
<!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(){
//↓定位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"/>
<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--注册页面后台
<!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--主页代码
、
通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用的更多相关文章
- 登陆页、注册页、会员中心页logo图的替换
关闭 PHP在线开发笔记 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书:ES6.虚 ...
- 前端数据存储方案集合（cookie localStorage等）以及详解 （二）
前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- 详解前端模块化工具-webpack
webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...
- 移动端返回上一页，刚需！document.referrer 详解
返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...
- 使用vue和drf后台进行登录页面和注册页面（本文大概的疏通一下前后台是怎么交互的）
注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- jquery中is()函数
is(expr)函数判断当前Jquery对象所匹配的元素是否存在.只要其中一种符合,就返回 true,否则返回 false. 如果 expr是个字符串,既视为Jquery的选择器,用于表示选择的元素. ...
- windows下nodejs安装及配置
1)在 http://nodejs.org/download/下载一个window的安装包 2)运行安装包,设置安装路径,如安装到D:\nodejs,安装后会自动将d:\nodejs添加到系统变量pa ...
- apache用户认证，ssl双向认证配置
安装环境: OS:contos 6.4 httpd:httpd-2.2.15-59.el6.centos.i686.rpm openssl:openssl-1.0.1e-57.el6.i686.rpm ...
- STL容器之优先队列(转)
STL容器之优先队列 原地址:http://www.cnblogs.com/summerRQ/articles/2470130.html 优先级队列,以前刷题的时候用的比较熟,现在竟然我只能记得它的关 ...
- CAS单点登录（SSO）服务端的部署和配置---连接MySQL进行身份认证
一.修改系统host,加入 127.0.0.1 server.test.com127.0.0.1 client1.test.com127.0.0.1 client2.test.com 二.安装grad ...
- luogu 1521-求逆序对
题意: 逆序对指在一个序列中ai>aj && i < j,也就是一前一后两个数,当大的在前面的时候即算一对. 题目求在一个由1-n组成的序列中逆序对为k的序列的个数. 出题 ...
- poj 1321 棋盘问题 简单DFS
题目链接:http://poj.org/problem?id=1321 很久没有敲搜索了啊,今天敲了个水题练练手,哈哈.... 题目大意: 就是求在n*n的方格上放置k个棋子的方案数 代码: #inc ...
- poj 1056 IMMEDIATE DECODABILITY 字典树
题目链接:http://poj.org/problem?id=1056 思路: 字典树的简单应用,就是判断当前所有的单词中有木有一个是另一个的前缀,直接套用模板再在Tire定义中加一个bool类型的变 ...
- 如何在Unity中分别实现Flat Shading(平面着色)、Gouraud Shading(高洛德着色)、Phong Shading(冯氏着色)
写在前面: 先说一下为什么决定写这篇文章,我也是这两年开始学习3D物体的光照还有着色方式的,对这个特别感兴趣,在Wiki还有NVIDIA官网看了相关资料后,基本掌握了渲染物体时的渲染管道(The re ...
- python 分片
有些书中叫做分片,有些书中叫做切片,翻译时的一些误差) 概念:将序列按段进行切割 作用:通过分片操作符来访问一定范围内的元素 实现:分片是通过两个冒号相隔的索引来实现 范围:符合序列特性即可使用切片功 ...