三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> PHP -> 一周一个小demo — 前端后台的交互实例 -> 正文阅读
 

[PHP]一周一个小demo — 前端后台的交互实例

一周一个小demo — 前端后台的交互实例   这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能。
一、界面概览
首先我们来看一下这个小demo的具体效果。

这个demo中,主要包括了三个步骤,也分别对应了三个功能,分别是注册,登录与留言板功能。而这三个功能基本都借助了前后台交互的几种技术,下面,本K就给大家分别展示一下这三个功能实现的代码。
二、功能实现 1、注册功能与登录功能 1.1 代码展示
1.1.1 注册功能
(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: 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>
    <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>

(2)后台部分

<?php

    header("Content-Type:text/html;charset=utf-8");
    
    $str = $_POST["formData"]."[;]";
    
    $num = file_put_contents("user.txt", $str,FILE_APPEND);
    
    if($num>0){
        echo "true";
    }else{
        echo "false";
    }

(3)用户数据存储文件

userName=123&pwd=123&rePwd=123[;]

// 这其实是一个普通的txt文件,就是后台部分的user.txt

1.1.2 登录功能
(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"/>
                        &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(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("doLogin.php",{"formData":str},function(data){
                    if(data=="true"){
                        location = "index.php?name="+$("input[name='userName']").val();
                    }else{
                        alert("用户名或密码错误!!!");
                    }
                });
            });
        });
    </script>
</html>

(2)后台部分

<?php

    header("Content-Type:text/html;charset=utf-8");
    
    $str = $_POST["formData"];
    
    list($userName) = explode("&", $str);
    list(,$pwd) = explode("&", $str);
    
    $users = file_get_contents("user.txt");
    
    $userArr = explode("[;]", $users);
    
    foreach ($userArr as $user) {
        list($realName) = explode("&", $user);
        list(,$realPwd) = explode("&", $user);
        if($userName==$realName&&$pwd==$realPwd){
            echo "true";
            die();
        }
    }
    
    echo "false";

1.2 功能详述
  用户注册与登录功能的实现的主要依赖有三个,分别是ajax向后台传递数据并接受结果,php后台对ajax发来的数据进行后台处理并反馈结果,用户数据的接收与存储(这一点其实可以化作后台处理部分)。
1.2.1 前端详述
  前端部分的主要任务是接收用户发来的信息并向后台传递,而这部分任务的实现主要依靠两行代码。
  首先我们看一下ajax发送请求这一部分是如何实现的。这一部分功能的实现主要就依靠两行代码。
  第一行代码是  var str = $("form").serialize();  这一行的功能就是将form表单中提交的数据序列化成一字符串,具体实现如下图
  

  将form表单中的提交数据序列化是为了后台能够更好的解析这一部分。
  而另一行关键代码就是ajax请求的主体部分,这一部分主要让人比较难搞明白的是接受的 data 参数。data 参数是ajax请求相对应后台处理完成后,后台给前台反馈的一个信息,就比如说注册成功以后所返回的true与失败以后所返回的false。
1.2.2 后台详述
  后台对前端传来数据的处理关键在于如何获取、解析传来的数据。这一部分,PHP给我们提供了三行代码来实现。
  第一行代码: $str = $_POST["formData"]; 通过超全局数组 $_POST 获得前台传来的序列化好的字符串,这就解决了数据的获取部分。
  第二行代码: file_put_contents("user.txt", $str,FILE_APPEND); PHP提供给我们的file_putt_contents(),让我们可以将我们获得的数据储存到一个文件中长久保留。
  第三行代码: file_get_contents("user.txt"); 这是PHP提供给我们与file_putt_contents()相对应的数据提取的方法。
  依靠以上三行代码,再加上我们对数据解析后的处理,我们就可以在后台轻松的对整个功能进行实现。
2、留言功能 2.1 代码展示
(1)前端部分

<!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();
            
            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("留言失败!原因不明!");
                    }
                });
                    
            });
        });
        
        function getData(){
            $.post("doShowNote.php",function(data){
                var arr = data.split("[;]");
                arr.pop();
                console.log(arr);
                for (var i=0;i< arr.length;i++) {
                    var thisNote = $.parseJSON(arr[i]);
                    var div = "<br/><div id='div"+i+"'>用户名:"+thisNote.userName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间:"+thisNote.time+"<br/><br/> 留言内容:"+thisNote.noteVal+"</div><br/><hr>"
                    $("#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>

(2)后台部分

// 笔记的添加
<?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];
    
    $str = json_encode($arr);
    
    $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");

(3)留言数据储存文件

// 这也是一个用于存储留言内容等各种信息的TXT文件

{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]

2.2 功能详述
2.1.1 前端部分
  前端部分的作用无异于登录注册功能,只不过根据要求多了对当前日期、用户名数据、留言版样式的获取。
2.1.2 后台部分
  后台部分其实和登陆注册的后台实现是一个套路,不过比两个要多了一步。 json_encode($arr); 这是PHP提供给我们的将数组转化成JSON对象格式的方法,这就方便了我们在前端对留言数据的反馈获取。
以上就是本K首次在这个星期给大家带来的小功能demo,希望能够帮到大家,如有错误,敬请指正,谢谢您的支持!
  PHP 最新文章
php开发者与composer的不得不说故事
用swoole和websocket开发简单聊天室
对于php
不错的php分词系统
php内存回收机制的学习
php表单处理
php中用GD绘制折线图
微信公众平台开发入门教程(2)接口配置
PHP扩展
php+phpStorm+xdebug配置方法
上一篇文章           查看所有文章
加:2017-06-18 22:05:23  更:2017-06-18 22:05:25 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年11日历
2017-11-20 5:47:50
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库