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. Data Mining: SSE,MSE,RMSE,R-square指标讲解

    转载自:http://blog.csdn.net/l18930738887/article/details/50629409 SSE(和方差.误差平方和):The sum of squares due ...

  2. 关于 block的一些浅识

    block的定义:“带自动变量的匿名函数” (一)写法: ^ void (int iAge){ NSLog(@"%d", iAge);}; 和C函数写法区别在于: 1) :以插入符 ...

  3. Luogu 4197 Peaks

    BZOJ 3545 带权限. 考虑离线,把所有边按照从小到大的顺序排序,把所有询问也按照从小到大的顺序排序,然后维护一个并查集和一个权值线段树,每处理一个询问就把比这个询问的$x$更小的边连上,具体来 ...

  4. EMR问题

    -- 门急诊患者生命体征信息 select t.clinic_code, t.*,t.rowid from ptm_opr_maininfo t where t.patient_id='0000E05 ...

  5. c# 使用protobuf格式操作 Redis

    protobuf格式介绍 1.protobuf为goole定义的类似于json的数据格式.2.最终都需要序列化为二进制形式进行传输存储.3.相对于xml,json格式来说,序列化为二进制后占用空间更小 ...

  6. 《Maven实战》笔记-3-Maven仓库

    一.Maven仓库的分类 1.本地仓库 一般来说,在Maven项目目录下,没有诸如lib/这样用来存放依赖文件的目录. 要自定义本地仓库目录地址时,可以编辑文件~/.m2/setting.xml,设置 ...

  7. hustOJ SPJ(special judge)模板

    #include <stdio.h> #include <math.h> #define PI acos(-1.0) #define AC 0 #define WA 1 int ...

  8. jquery easyui datagrid 多选只能获取一条数据

    DataGrid属性: singleSelect ------如果为true,则只允许选择一行: idField ------- 指明哪一个字段是标识字段: 方法: 一:getSelections-- ...

  9. nfs搭建和挂载

    1.搭建server a.创建共享目录 mkdir /nfs1 b.vim /etc/sysconfig/nfs     固定端口 c.vim /etc/export /nfs1 192.168.10 ...

  10. jQuery实例代码-表单相关

    select option 获取选中项的文本值 $("#ddl_GoOutReasonType option:selected").text() 根据索引定于option项 $(& ...