通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/
前 言
PHP
通过上一篇博客，注册账号与登录页面--前后台数据交互 跳转转到index主页，接下来进入主页留言板功能，通过ajax向后台传输数据，同时发表留言。
具体的内容分析如下：
① PHP中的数据传输-->>--在主页先添加基础HTML5基本框架，通过form表单提交数据
>>由主页传输给主页后台-->>主页后台经过转码保存实例化的文件
②主页后台通过判断（是否保存文件）使用输出语句输出true或false，前台通过ajax中的post中的function函数判断
前端通过判断ture和false，通过if语句刷新页面。
③内容添加是通过js函数getData()，函数自动调用添加。当然由前台添加时也是通过一个show后台传输数据。
总共总共8个文件：
其中07_file与libs同一级别 代码植入请看具体内容。
↑ 注册账号与登录页面--前后台数据交互 ↑ 本篇增加与需要修改index文件
↑ 插件
代码注释里面有很详细的解析，如有需要请仔细阅读。（希望可以帮助到你）
| 1、 注册账号与登录页面效果图 |
| 2、 主页留言板效果图 |
新的代码：
<!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，触发ajax中的post函数，具体内容往下看。
getData(); //↓主页面的红字（账户名的获取）
var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';
// ↓一个if判断，当用户名为空也就是直接打开index页面返回登录页面login.php
// if(userName=="null"){
// location = "login.php";
// } //↑为了方便观看，我已关闭，这部分可以省略。 //↓主页最上放的 欢迎您，红色的字。
$("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>"); //↓通过JQuery语言，捕捉id为submit，绑定click事件，函数为function里面的内容。
$("#submit").on("click",function(){
//↓捕捉id为note的内容为定义变量 nateval。也就是文本框里面的内容
var noteVal = $("#note").val();
//if判断文本框里面的内容不能为空，为空return
if(noteVal==""){
alert("留言内容不能为空，请核对！");
return;
}
//调用getTime函数给变量time。
var time = getTime(); // 对象
var note = {
"userName":userName,
"time":time,
"noteVal":noteVal
} //ajax向页面 doAdd.php 发送数据，并输出结果（取决于所返回的内容）
$.post("doAdd.php",note,function(data){
if(data=="true"){
alert("留言内容提交成功！");
//刷新页面
location.reload(true); }else{
alert("留言失败！原因不明！");
}
});
});
});
//搭建一个getData函数，当调用的时候才执行。
function getData(){
//输出来自请求页面 doShowNote.php 的结果
$.post("doShowNote.php",function(data){
//↓ 把形参用[;]分隔为一个个字符串数组。
var arr = data.split("[;]");
//↓ 删除最后一个空数组
arr.pop();
//↓ 控制台打印，观看字符串数据的样式。
console.log(arr);
//↓ for循环把每次note.txt文件更新的数据从下往上排列出来
for (var i=0;i< arr.length;i++) {
//↓ 取得当前的第i+1个数组。
var thisNote = $.parseJSON(arr[i]);
//↓ 排列的样式。
var div = "<br/><div id='div"+i+"'>用户名："+thisNote.userName+" 发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</div><br/><hr>"
//↓ 从id为liuyanban的前端插入排列的样式
$("#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>
新的index.php行内代码--主页留言板
<?php
header("Content-Type:text/html;charset=utf-8");
//↓ 获得主页传输过来的用户名(字符串内容)
$userName = $_POST["userName"];
//↓ 获得主页传输过来的时间(字符串内容)
$time = $_POST["time"];
//↓ 获得主页传输过来的文本框内容。(字符串内容)
$noteVal = $_POST["noteVal"];
//↓ 通过关联数组定义每个从前端传输过来的字符串，添加key值，定义为变量arr
$arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal];
//↓ 对变量进行 JSON 编码
$str = json_encode($arr);
//↓ 将一个字符串写入文件note.txt,字符串后面加入一个[;],作用用来分隔每个字符串。FILE_APPEND为追加数据。
$num = file_put_contents("note.txt", $str."[;]",FILE_APPEND);
//↓ if判断，echo输出内容为后台返回tada形参的值。
if($num>0){
echo "true";
}else{
echo "false";
}
doAdd.php行内代码--主页后台
<?php
header("Content-Type:text/html;charset=utf-8");
//file_get_contents将note.txt文件读入一个字符串，
//↓并且通过echo向前台data形参输出返回值。
echo file_get_contents("note.txt");
doShowNote行内代码--输出文件后台
↑第三个虽然少但是必不可少。
note.txt由文件doAdd.php自动在文件夹01_lx中生成。
下面重复上一篇的代码如果不想跳转页面直接点开看就可以，里面有详细解析。
<!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--主页代码
反思，复盘，每天收获一点---------------------期待更好的自己。
通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/的更多相关文章
- 前端笔记之服务器&Ajax（中）MySQL基础操作&PHP操作数据库&Ajax
一.数据库基础 1.1什么是数据库? 什么是数据库? 答:就是一个很大的一个文件,只不过这个文件可以通过一些‘命令’操作数据: 增.删.改.查数据: 数据库等于持久数据和数据操作的一个统称. 数据库是 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用
前 言 PHP 学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...
- ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.
- DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程
一.DataTables 个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...
- 前端笔记之服务器&Ajax（上）服务器&PHP&数据交互&HTTP
一.服务器 1.1 什么是服务器,做什么的? 服务器,就是放在机房中的电脑,和我们的电脑的区别在与服务器有固定的IP,服务器的安全性和稳定性相当的高;性能一般就可以了,但是CPU的性能要比普通的客户机 ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- 说说前端那些事之ajax
原生ajax请求 前些日子,忙着考驾照,没有时间对知识进行总结,感到十分惭愧啊,刚好趁现在有时间,做个知识总结,希望对各位有所帮助. 很多人都知道ajax是用来进行数据请求的,但是具体的请求方法会有些 ...
- Python web前端 11 form 和 ajax
Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...
随机推荐
- Display:table;妙用，使得左右元素高度相同
我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
- openlayers应用（二）：加载百度离线瓦片
上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机 ...
- Day2 Python的运算符及三大语句控制结构
Python的运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 Python的三大语句控制结构: ...
- 使用JS开发桌面端应用程序NW.js-1-Menu菜单的使用小记
前言 本文主要内容为nw.js官方文档中没有提到,而在实际入手开发过程中才碰到的问题以及经验的汇总. 详情请查看官方文档:http://docs.nwjs.io/en/latest/Reference ...
- redis性能优化
redis日志截图:
- 基于DotNet Core的RPC框架(一) DotBPE.RPC快速开始
0x00 简介 DotBPE.RPC是一款基于dotnet core编写的RPC框架,而它的爸爸DotBPE,目标是实现一个开箱即用的微服务框架,但是它还差点意思,还仅仅在构思和尝试的阶段.但不管怎么 ...
- 使用faker 生成中文测试数据
https://github.com/fzaninotto/Faker/blob/master/src/Faker/Provider/zh_CN/Address.php 常用的类型都在里面. 下面是一 ...
- PreparedStatement/Statement处理insert update等操作时乱码，以及URL
原文: 在顶目中无意中碰到PreparedStatement 在存DB时出现乱码,困扰了好久终于解决问题 问题代码如下 ps = con.prepareStatement(INSERT_SQL); p ...
- 用python实现对图像的卷积(滤波)
之前在看卷积神经网络,很好奇卷积到底是什么,最后看到了这篇文章http://blog.csdn.net/zouxy09/article/details/49080029,讲得很清楚,这篇文章中提到了对 ...
- Linux_shell 学习
shell中test的运用 test 命令是用于检查某个条件是否成立,他可以进行数值.符号.文件三个方面的测试 1.数值中的运用 -eq 等于 -ne 不等于 -gt 大于 -ge 大于等于 -lt ...