三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
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基础入门(四)
PHP面向对象之工作单元
仪式感的第一篇,说说我的入行经历和开博客
PHP文件是什么?如何打开PHP文件?
PHP面向对象之标识对象
专业定制开发一元夺宝(一元购)网站系统建设
linux环境下编译php扩展
Magento Api 记录
php随笔1
在PHP中,将一个汉字数组按照拼音首字母进行
上一篇文章           查看所有文章
加: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
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-29 11:54:18
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库