thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢?
前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架;target,规定在何处打开链接文档。
另外想要实现一个好看的方便、能重复使用的弹窗就要开发一个弹窗插件了,这里推荐使用前端的弹窗插件sweetalert.js,为了方便、重复使用我们把它成封装一个函数,页面要引入sweetalert.js的css和js文件
后端:为了方便以后重复使用,先写一个公共函数,就是调用之前前端封装的函数弹出提示信息
一、form提交数据,前端HTML代码,要把iframe隐藏,否则会显示iframe在页面;form中target表示在iframe中打开form表单
- <iframe style="display: none" name="if"></iframe>
- <form action="{:url('login/index')}" method="post" target="if">
- <div class="panel loginbox">
- <div class="panel-body">
- <div class="form-group">
- <div class="field field-icon-right">
- <input type="text" name="username" id="username" placeholder="登录账号" required value="admin" />
- <span class="icon icon-user margin-small"></span>
- </div>
- </div>
- <div class="form-group">
- <div class="field field-icon-right">
- <input type="password" class="input input-big" name="password" id="password" placeholder="登录密码" required/>
- <span class="icon icon-key margin-small"></span>
- </div>
- </div>
- </div>
- <div style="padding:30px;">
- <input type="submit" id="button" class="button button-block bg-main text-big input-big" value="登录">
- </div>
- </div>
- </form>
前端封装的函数
- /**
- * 提示弹窗
- * @param text 弹窗内容
- * @param type 图标类型,默认null,可以填写success、error、warning、info、question
- * @param bool showCancelButton 是否显示取消按钮
- * @param callback 按下确认键后执行的函数
- * @param all_callback 按到按钮之外,弹窗消失时执行函数
- */
- function my_alert(text,type,callback,showCancelButton,all_callback) {
- var now_text = text ? text : '你确定吗';
- var now_type = type ? type : null;
- var now_showCancelButton = showCancelButton ? showCancelButton : false;
- var now_callback = callback ? callback : function () {};
- var all_callback = all_callback ? all_callback : function (dismiss) {};
- if (typeof(arguments[1]) == "function") {
- now_type = null;
- now_callback = arguments[1];
- now_showCancelButton = arguments[2];
- }
- swal({
- text:now_text,
- type:now_type,
- showCancelButton:now_showCancelButton,
- confirmButtonText:'确定',
- cancelButtonText:'取消',
- }).then(function () {
- now_callback();
- },all_callback)
- }
后端封装公共函数
- /**
- * iframe 窗口调用父窗口:parent.functionName();
- * @param $data 弹窗信息
- * @param string $type 弹出框的类型
- * @param bool $is_reload 是否刷新
- * @param string $url 新页面打开地址
- * @param
- */
- function php_alert($data,$type = 'error', $is_reload = false, $url = ''){
- if(empty($url) && !$is_reload){
- echo "<script>parent.my_alert('$data','$type')</script>";
- die;
- }else if (empty($url) && $is_reload){
- echo "<script>parent.my_alert('$data','$type',function() {parent.location.reload();})</script>";
- }else{
- echo "<script>parent.my_alert('$data','$type',function() {parent.location.href = '$url';})</script>";
- die;
- }
- }
使用,回调地址要写模块/控制器/方法,如果不写模块admin会把控制器article作为模块,报article模块不存在
- if($save){
- //$this->success('添加文章成功','index');
- php_alert('添加文章成功!','success',false,'/admin/article/index');
- }else{
- php_alert('添加文章失败!','error',false);
- //$this->error('添加文章失败','index');
- }
弹出validate验证信息
- $validate = \think\Loader::validate('Article');
- if($validate->scene('update')->check($data)){
- }else{
- $msg = $validate->getError();
- php_alert($msg,'error',false);
- }
二、删除文章、管理员
后端封装函数,因为删除数据时页面会跳转的,页面没有sweetalert插件的相关文件的,所以要输出引入相关文件
- /**
- * 自定义tp自带的跳转提示页;
- * @param data 弹窗信息
- * @param string $type 弹出框的类型
- * @param string callable 新页面打开地址
- */
- function alert_msg($text='',$type='error',$callback=''){
- echo '<meta charset="utf-8" /><link href="/public/static/common/css/sweetalert.min.css" rel="stylesheet"><script src="/public/static/admin/js/jquery_002.js"></script><script type="text/javascript" src="/public/static/common/js/sweetalert.min.js"></script> <script src="/public/static/admin/js/my_config.js"></script>';
- echo "<script>window.onload=function () {my_alert('$text','$type',function() {location.href = '$callback';})}</script>";
- die;
- }
调用
- public function del(){
- $del = db('admin')->where('id',input('id'))->delete();
- if($del){
- alert_msg('删除管理员成功!','success','/admin/admin/index');
- }else{
- alert_msg('删除管理员失败!','error','/admin/admin/index');
- }
- }
thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息的更多相关文章
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- form表单提交数据的数据格式
form表单提交的数据格式默认是 enctype="application/x-www-form-urlencoded"这样将input框的数据与input框的name属性以键值对 ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- form表单提交数据给后台
1.完整登录示例 1. form表单往后端提交数据注意三点 1.所有获取用户输入标签都应该放在form表单里面 2.action属性控制往哪儿提交,method一般都是设置成post 3.提交按钮必须 ...
- asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法
MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交
- 关于form表单提交数据后不跳转页面+ajax接收返回值的处理
1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...
- iframe+form表单提交数据
<h6>基于iframe+Form表单</h6> <iframe id="iframe" name="ifra" onclick= ...
随机推荐
- C++实现筛选法
筛选法 介绍: 筛选法又称筛法,是求不超过自然数N(N>1)的所有质数的一种方法.据说是古希腊的埃拉托斯特尼(Eratosthenes,约公元前274-194年)发明的,又称埃拉托斯特尼筛子. ...
- SpringBoot05 数据操作01 -> JPA的基本使用、基本使用02
前提: 创建一个springboot项目 创建一个名为springboottest的MySQL数据库 1 jar包准备 jpa的jar包 mysql驱动的jar包 druid数据库连接池的jar包 l ...
- Opengl创建几何实体——四棱锥和立方体
//#include <gl\glut.h>#include <GL\glut.h>#include <iostream> using namespace std; ...
- yii2常用excel操作库
yii2使用较多的excel操作库 1."phpoffice/phpexcel" https://github.com/PHPOffice/PHPExcel/archive/1.8 ...
- 网络笔记-unity 实现AOP
该文章来自网络,如有冒犯,请及时联系! 前提 引用以下文件 Microsoft.Practices.ObjectBuilder2.dll Microsoft.Practices.Unity.dll M ...
- GPG入门 - 练习笔记
GPG入门练习笔记 参考阮一峰的GPG入门教程http://www.ruanyifeng.com/blog/2013/07/gpg.html 1.加密 1)刘言机器: 用王老师公钥加密gp ...
- Pull项目失败
1.网速原因 2.提示邮箱失效. 邮箱失效:解决方案 File->Setting: 然后,要记得重启,IDEA. 然后,在终端输入:git branch -l 查看项目分支 这样,设置好了用户名 ...
- UIViewController+MJPopupViewController
1.MJPopupBackgroundView 1.1 MJPopupBackgroundView.h // // MJPopupBackgroundView.h // watched // // C ...
- 「BZOJ 1831」「AHOI 2008」逆序对「贪心」
题意 给定一个长度为\(n\),值域为\([1,k]\),某些位置不确定的数组,求最小的逆序对.\(n\leq 10^4, k \leq 100\) 题解 这题有人用前缀和优化\(dp\)过了,但是这 ...
- Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.socket
一.解决var/run/mysqld没有pid和sock文件 MySQL下mysql.sock丢失丢失的原因一般是因为配置文件不一致的原因,mysqld 错误启动,mysqld_safe 会清除一次m ...