form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢?

前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架;target,规定在何处打开链接文档。

   另外想要实现一个好看的方便、能重复使用的弹窗就要开发一个弹窗插件了,这里推荐使用前端的弹窗插件sweetalert.js,为了方便、重复使用我们把它成封装一个函数,页面要引入sweetalert.js的css和js文件

后端:为了方便以后重复使用,先写一个公共函数,就是调用之前前端封装的函数弹出提示信息

一、form提交数据,前端HTML代码,要把iframe隐藏,否则会显示iframe在页面;form中target表示在iframe中打开form表单

  1.   <iframe style="display: none" name="if"></iframe>
  2. <form action="{:url('login/index')}" method="post" target="if">
  3. <div class="panel loginbox">
  4. <div class="panel-body">
  5. <div class="form-group">
  6. <div class="field field-icon-right">
  7. <input type="text" name="username" id="username" placeholder="登录账号" required value="admin" />
  8. <span class="icon icon-user margin-small"></span>
  9. </div>
  10. </div>
  11. <div class="form-group">
  12. <div class="field field-icon-right">
  13. <input type="password" class="input input-big" name="password" id="password" placeholder="登录密码" required/>
  14. <span class="icon icon-key margin-small"></span>
  15. </div>
  16. </div>
  17. </div>
  18. <div style="padding:30px;">
  19. <input type="submit" id="button" class="button button-block bg-main text-big input-big" value="登录">
  20. </div>
  21. </div>
  22. </form>

前端封装的函数

  1. /**
  2. * 提示弹窗
  3. * @param text 弹窗内容
  4. * @param type 图标类型,默认null,可以填写success、error、warning、info、question
  5. * @param bool showCancelButton 是否显示取消按钮
  6. * @param callback 按下确认键后执行的函数
  7. * @param all_callback 按到按钮之外,弹窗消失时执行函数
  8. */
  9.  
  10. function my_alert(text,type,callback,showCancelButton,all_callback) {
  11. var now_text = text ? text : '你确定吗';
  12. var now_type = type ? type : null;
  13. var now_showCancelButton = showCancelButton ? showCancelButton : false;
  14. var now_callback = callback ? callback : function () {};
  15. var all_callback = all_callback ? all_callback : function (dismiss) {};
  16.  
  17. if (typeof(arguments[1]) == "function") {
  18. now_type = null;
  19. now_callback = arguments[1];
  20. now_showCancelButton = arguments[2];
  21. }
  22.  
  23. swal({
  24. text:now_text,
  25. type:now_type,
  26. showCancelButton:now_showCancelButton,
  27. confirmButtonText:'确定',
  28. cancelButtonText:'取消',
  29.  
  30. }).then(function () {
  31. now_callback();
  32. },all_callback)
  33. }

后端封装公共函数

  1. /**
  2. * iframe 窗口调用父窗口:parent.functionName();
  3. * @param $data 弹窗信息
  4. * @param string $type 弹出框的类型
  5. * @param bool $is_reload 是否刷新
  6. * @param string $url 新页面打开地址
  7. * @param
  8. */
  9. function php_alert($data,$type = 'error', $is_reload = false, $url = ''){
  10. if(empty($url) && !$is_reload){
  11. echo "<script>parent.my_alert('$data','$type')</script>";
  12. die;
  13. }else if (empty($url) && $is_reload){
  14. echo "<script>parent.my_alert('$data','$type',function() {parent.location.reload();})</script>";
  15. }else{
  16. echo "<script>parent.my_alert('$data','$type',function() {parent.location.href = '$url';})</script>";
  17. die;
  18. }
  19. }

使用,回调地址要写模块/控制器/方法,如果不写模块admin会把控制器article作为模块,报article模块不存在

  1. if($save){
  2. //$this->success('添加文章成功','index');
  3. php_alert('添加文章成功!','success',false,'/admin/article/index');
  4. }else{
  5. php_alert('添加文章失败!','error',false);
  6. //$this->error('添加文章失败','index');
  7. }

弹出validate验证信息

  1. $validate = \think\Loader::validate('Article');
  2. if($validate->scene('update')->check($data)){
  3.  
  4. }else{
  5. $msg = $validate->getError();
  6. php_alert($msg,'error',false);
  7. }

二、删除文章、管理员

后端封装函数,因为删除数据时页面会跳转的,页面没有sweetalert插件的相关文件的,所以要输出引入相关文件

  1. /**
  2. * 自定义tp自带的跳转提示页;
  3. * @param data 弹窗信息
  4. * @param string $type 弹出框的类型
  5. * @param string callable 新页面打开地址
  6. */
  7. function alert_msg($text='',$type='error',$callback=''){
  8. 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>';
  9. echo "<script>window.onload=function () {my_alert('$text','$type',function() {location.href = '$callback';})}</script>";
  10. die;
  11. }

调用

  1. public function del(){
  2. $del = db('admin')->where('id',input('id'))->delete();
  3. if($del){
  4. alert_msg('删除管理员成功!','success','/admin/admin/index');
  5. }else{
  6. alert_msg('删除管理员失败!','error','/admin/admin/index');
  7. }
  8. }

thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  3. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  4. form表单提交数据的数据格式

    form表单提交的数据格式默认是 enctype="application/x-www-form-urlencoded"这样将input框的数据与input框的name属性以键值对 ...

  5. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  6. form表单提交数据给后台

    1.完整登录示例 1. form表单往后端提交数据注意三点 1.所有获取用户输入标签都应该放在form表单里面 2.action属性控制往哪儿提交,method一般都是设置成post 3.提交按钮必须 ...

  7. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

  8. 关于form表单提交数据后不跳转页面+ajax接收返回值的处理

    1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...

  9. iframe+form表单提交数据

    <h6>基于iframe+Form表单</h6> <iframe id="iframe" name="ifra" onclick= ...

随机推荐

  1. C++实现筛选法

    筛选法 介绍: 筛选法又称筛法,是求不超过自然数N(N>1)的所有质数的一种方法.据说是古希腊的埃拉托斯特尼(Eratosthenes,约公元前274-194年)发明的,又称埃拉托斯特尼筛子. ...

  2. SpringBoot05 数据操作01 -> JPA的基本使用、基本使用02

    前提: 创建一个springboot项目 创建一个名为springboottest的MySQL数据库 1 jar包准备 jpa的jar包 mysql驱动的jar包 druid数据库连接池的jar包 l ...

  3. Opengl创建几何实体——四棱锥和立方体

    //#include <gl\glut.h>#include <GL\glut.h>#include <iostream> using namespace std; ...

  4. yii2常用excel操作库

    yii2使用较多的excel操作库 1."phpoffice/phpexcel" https://github.com/PHPOffice/PHPExcel/archive/1.8 ...

  5. 网络笔记-unity 实现AOP

    该文章来自网络,如有冒犯,请及时联系! 前提 引用以下文件 Microsoft.Practices.ObjectBuilder2.dll Microsoft.Practices.Unity.dll M ...

  6. GPG入门 - 练习笔记

     GPG入门练习笔记  参考阮一峰的GPG入门教程http://www.ruanyifeng.com/blog/2013/07/gpg.html 1.加密     1)刘言机器: 用王老师公钥加密gp ...

  7. Pull项目失败

    1.网速原因 2.提示邮箱失效. 邮箱失效:解决方案 File->Setting: 然后,要记得重启,IDEA. 然后,在终端输入:git branch -l 查看项目分支 这样,设置好了用户名 ...

  8. UIViewController+MJPopupViewController

    1.MJPopupBackgroundView 1.1 MJPopupBackgroundView.h // // MJPopupBackgroundView.h // watched // // C ...

  9. 「BZOJ 1831」「AHOI 2008」逆序对「贪心」

    题意 给定一个长度为\(n\),值域为\([1,k]\),某些位置不确定的数组,求最小的逆序对.\(n\leq 10^4, k \leq 100\) 题解 这题有人用前缀和优化\(dp\)过了,但是这 ...

  10. 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 ...