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= ...
随机推荐
- Tensorflow fetch和feed
import tensorflow as tf #Fetch input1 = tf.constant(1.0)input2 = tf.constant(3.0)input3 = tf.constan ...
- HDU3686 Traffic Real Time Query
按照vdcc缩点之后一条边只会属于一个新的点集,由于这棵树上满足(不是割点) - (割点) - (不是割点)的连接方法,所以求两条边之间的必经点就是(树上距离 / 2),倍增跳lca即可 考虑到缩点后 ...
- Python--socket和threading编程
网络编程基础(一) TCP/IP协议 OSI/RM协议 特点:独立于计算机硬件和操作系统,统一分配网络地址,提供可靠服务,隔离了物理网络的硬件差异 协议分层(百度):网络接口层:IEE802.3(以太 ...
- 接口型模式(二)Bridge(桥接)模式
目的: 将抽象与抽象方法的实现相分离,使得它们可以独自变化.常用于驱动程序中,使得顶层逻辑不受驱动底层改变的影响,如数据库的变化. 关键词:Bridge, 抽象与实现分离,驱动程序 必要性:从一般抽象 ...
- linux配置mysql主从复制
1.准备工作,2台服务器都安装最好一个版本的mysql 主:192.168.100.1 从:192.168.100.2 a.修改主数据库/etc/my.cnf,mysqld下添加.修改之后重启. [m ...
- 重新排序文本文件(txt)里面的内容
近段时间,Insus.NET学习练习物件与对象,怎样创建实际环境中的对象.对读取文本文件以及分析文本文件作为目标.因此搜索论坛一些例子,就如下面这题,实现的方法分享给大家. 以文本行作为一个对象,所以 ...
- 搭建 pytorch框架
Pytorch 发布了1.0,对windows的支持效果更好,因此,今天试了一下安装Pytorch.安装速度确实很快,安装也很方便. 进入pytorch的官网,选择对应的版本 根据版本输入相应命令 注 ...
- Tomcat 集群 + Redis Session 共享出现 Session 瞬间失效问题
写在前面的话 写这篇博客出于公司最近要迁移到新的云上面且对之前的资源,架构做一个升级. 本来是一个不大的项目,旧环境旧一个 TOMCAT 跑起来,不过出于高可用考虑,新环境决定使用 TOMCAT 集群 ...
- java中抽象类与接口
1.抽象类是类,它的子类不能再继承其它类了,但可以实现一个和多个接口.接口不是类,它的子接口可以继承多个接口.2.抽象类中是可以有不用abstract修饰的方法,而接口中只能有抽象方法,即方法都要用a ...
- Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre
原文链接:https://blog.csdn.net/hq091117/article/details/79065199 https://blog.csdn.net/allen_tsang/artic ...