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>

前端封装的函数

 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 }

原文地址:https://www.cnblogs.com/YAN-HUA/p/9132474.html

时间: 2024-12-28 20:44:04

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

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记 1.  模拟form表单提交数据:(get方式) <body> <formmethod="get"action="DataTest7"> <inputtype="text"name="uname"value="yang"id="myname"><br/> <inputtype="password&q

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

springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal form-material" th:object="${user}" th:action="@{/user/updateOneUserInfo}" method="post"> <input type="hidden

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

一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交. <form action='http://www.123.com/postValue' method='post'> <input type='text' name='username' /> <input type=

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

js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param {object} 参数对象 * url 必填 提交地址 * methond 选填 默认post 提交方式 post get * target 选填 默认_self 当前页面还是新页面 _self _blank * 其它参数 */ function jsFormSubmit(params) { var turnForm = document.createElement("form"); //一定要

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

MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交 (2)特殊方式提交 2.控制器处理表单数据的四种方法 方法1:使用传统的Request请求数据 方法2:Action参数名与表单元素name值一一对应 方法3:从MVC封装的FormCollection容器中读取 方法4:使用实体作为Action参数传入,前提是提交的表单元素名称与实体属性名称一一对应 控制器源码 using MvcStudy.Models;u

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

1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取iframe里的内容(即后台利用GSON传回来的返回值). 代码部分: <form id="form1"  action="../PublishPostingsServlet"  enctype="multipart/form-data"  metho

form表单提交数据

情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.attr("value", myUeditor.window.getCont

jsp上传文件,form表单提交数据enctype="multipart/form-data"时servlet获取不到type=“text”的数据问题

在上传文件用了commons fileupload组件的情况下,servlet接收的数据只能是type=file表单元素类型,那么获取type=text类型,就可以使用parseRequest(request)来获取list,fileitem,判断isFormField,为true非file类型的.就可以处理了.下面是处理的部分代码: DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold

向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 1 #index.py 2 #!/usr/bin/env python 3 #-*- coding:utf-8 -*- 4 import tornado.web 5 import tornado.ioloop 6 class indexHandler(tornado.web.RequestHand