php教程

前端后台的交互的一个实例分享

零下一度

Jun 26, 2017 pm 02:44 PM

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?1.1.11"/><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?1.1.11"></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）后台部分

<?phpheader("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?1.1.11"/><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?1.1.11"></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）后台部分

<?phpheader("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?1.1.11"></script><script>$(function(){
            getData();            var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';if(userName=="null"){
                location = "login.php";
            }
            
            $("#div1").html("欢迎您，<span style=&#39;color:red;&#39;>"+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=&#39;div"+i+"&#39;>用户名："+thisNote.userName+"     发布时间："+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）后台部分

// 笔记的添加<?phpheader("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";
    }

// 笔记的展示<?phpheader("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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

PHP：服务器端脚本语言的简介Apr 16, 2025 am 12:18 AM

PHP是一种服务器端脚本语言，用于动态网页开发和服务器端应用程序。1.PHP是一种解释型语言，无需编译，适合快速开发。2.PHP代码嵌入HTML中，易于网页开发。3.PHP处理服务器端逻辑，生成HTML输出，支持用户交互和数据处理。4.PHP可与数据库交互，处理表单提交，执行服务器端任务。

PHP和网络：探索其长期影响Apr 16, 2025 am 12:17 AM

PHP在过去几十年中塑造了网络，并将继续在Web开发中扮演重要角色。1)PHP起源于1994年，因其易用性和与MySQL的无缝集成成为开发者首选。2)其核心功能包括生成动态内容和与数据库的集成，使得网站能够实时更新和个性化展示。3)PHP的广泛应用和生态系统推动了其长期影响，但也面临版本更新和安全性挑战。4)近年来的性能改进，如PHP7的发布，使其能与现代语言竞争。5)未来，PHP需应对容器化、微服务等新挑战，但其灵活性和活跃社区使其具备适应能力。

为什么要使用PHP？解释的优点和好处Apr 16, 2025 am 12:16 AM

PHP的核心优势包括易于学习、强大的web开发支持、丰富的库和框架、高性能和可扩展性、跨平台兼容性以及成本效益高。1)易于学习和使用，适合初学者；2)与web服务器集成好，支持多种数据库；3)拥有如Laravel等强大框架；4)通过优化可实现高性能；5)支持多种操作系统；6)开源，降低开发成本。

揭穿神话：PHP真的是一种死语吗？Apr 16, 2025 am 12:15 AM

PHP没有死。1)PHP社区积极解决性能和安全问题，PHP7.x提升了性能。2)PHP适合现代Web开发，广泛用于大型网站。3)PHP易学且服务器表现出色，但类型系统不如静态语言严格。4)PHP在内容管理和电商领域仍重要，生态系统不断进化。5)通过OPcache和APC等优化性能，使用OOP和设计模式提升代码质量。

PHP与Python辩论：哪个更好？Apr 16, 2025 am 12:03 AM

PHP和Python各有优劣，选择取决于项目需求。1)PHP适合Web开发，易学，社区资源丰富，但语法不够现代，性能和安全性需注意。2)Python适用于数据科学和机器学习，语法简洁，易学，但执行速度和内存管理有瓶颈。

PHP的目的：构建动态网站Apr 15, 2025 am 12:18 AM

PHP用于构建动态网站，其核心功能包括：1.生成动态内容，通过与数据库对接实时生成网页；2.处理用户交互和表单提交，验证输入并响应操作；3.管理会话和用户认证，提供个性化体验；4.优化性能和遵循最佳实践，提升网站效率和安全性。

PHP：处理数据库和服务器端逻辑Apr 15, 2025 am 12:15 AM

PHP在数据库操作和服务器端逻辑处理中使用MySQLi和PDO扩展进行数据库交互，并通过会话管理等功能处理服务器端逻辑。1）使用MySQLi或PDO连接数据库，执行SQL查询。2）通过会话管理等功能处理HTTP请求和用户状态。3）使用事务确保数据库操作的原子性。4）防止SQL注入，使用异常处理和关闭连接来调试。5）通过索引和缓存优化性能，编写可读性高的代码并进行错误处理。