这节我们继续优化，接收到返回值，我们在前端做一些处理，如:密码修改成功，弹出一个成功的提示框。这个提示框我们采用sweetalert

其中xtalert.js是对上面两个文件的一个封装，使得我们用sweetalert变得更简单，需要素材的同学点击右侧的二维码打赏10元，截图发送到邮箱463951510@qq.com吧，之前打赏过本论坛实战的就不用再打赏了哈！

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="sweetalert/sweetalert.css">

        <script src="sweetalert/sweetalert.min.js"></script>

        <script src="sweetalert/xtalert.js"></script>

        <style>

            button{

                display: block;

                margin-bottom: 10px;

            }

        </style>

    </head>

    <body>

        <button onclick="xtalert.alertError('不能删除文章！')">错误提示</button>

        <button onclick="xtalert.alertInfo('您没有权限，请联系管理员！')">信息提示</button>

        <button onclick="xtalert.alertSuccess('恭喜您！操作成功！')">成功提示</button>

        <button id='confirm-btn'>确认提示</button>

        <script>

            var confirmBtn = document.getElementById('confirm-btn');

            confirmBtn.onclick = function(event){

                xtalert.alertConfirm({

                    'msg': '恭喜！文章发表成功！是否再发一篇？',

                    'confirmText': '再发一篇',

                    'cancelText': '回到首页',

                    'confirmCallback': function(){

                        alert('点击了确认按钮');

                    },

                    'cancelCallback': function(){

                        alert('点击了取消按钮');

                    }

                });

            }

        </script>

        <button id='input-btn'>输入框提示</button>

        <script>

            var inputBtn = document.getElementById('input-btn');

            inputBtn.onclick = function(event){

                xtalert.alertOneInput({

                    'text': '请输入板块名称',

                    'confirmCallback': function(text){

                        alert(text);

                        xtalert.close();

                    }

                });

            }

        </script>

        <button onclick="xtalert.alertNetworkError()">网络错误</button>

        <button onclick="xtalert.alertInfoToast('权限受限，请联系管理员！')">信息toast</button>

        <button onclick="xtalert.alertErrorToast('权限受限，请联系管理员！')">错误toast</button>

        <button onclick="xtalert.alertSuccessToast('恭喜！操作成功！')">成功toast</button>

    </body>

</html>

sweetalert提示框使用demo

在 static/common/下创建目录sweetalert，并把以上3个文件放进去，因为不仅仅修改密码会用到提示框，项目其他地方也会用到，所以把它放到common里面。

在父模板cms_base.html引入此3个文件

<head>

...

    <link href="{{ url_for('static', filename='common/sweetalert/sweetalert.css')}}" rel="stylesheet">

    <script src="{{ url_for('static', filename='common/sweetalert/sweetalert.min.js') }}"></script>

    <script src="{{ url_for('static', filename='common/sweetalert/xtalert.js') }}"></script>

</head>

现在就可以修改resetpwd.js，对返回值做处理了

/**

 * Created by user on 2018/8/7.

 */

$(function () {

    $('#submit').click(function (event) {

        //阻止按钮默认的提交表单行为

        event.preventDefault();

        var oldpwdE = $('input[name=oldpwd]');

        var newpwdE = $('input[name=newpwd]');

        var newpwd2E = $('input[name=newpwd2]');

        var oldpwd = oldpwdE.val();

        var newpwd = newpwdE.val();

        var newpwd2 = newpwd2E.val();

        //这里使用我们自己封装好的bbsajax，它具有了csrf

        bbsajax.post({

            'url': '/cms/resetpwd/',

            'data': {

                'oldpwd': oldpwd,

                'newpwd': newpwd,

                'newpwd2': newpwd2

            },

            'success': function (data) {

                //根据状态码判断

                if (data['code'] === 200){

                    //弹出成功的提示框，提示语是从后台传过来的message

                    xtalert.alertSuccessToast(data['message']);

                    oldpwdE.val('');   //完成请求后把表单输入的值清空

                    newpwdE.val('');

                    newpwd2E.val('');

                }else{

                    xtalert.alertError(data['message']);

                    oldpwdE.val('');

                    newpwdE.val('');

                    newpwd2E.val('');

                }

            },

            'fail': function (error) {

                xtalert.alertNetworkError('网络错误');

            }

        });

    });

})

33、Flask实战第33天：sweetalert提示框的更多相关文章

  1. sweetalert提示框

    文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...

  2. 「小程序JAVA实战」小程序 loading 提示框与页面跳转（37）

    转自:https://idig8.com/2018/09/02/xiaochengxujavashizhanxiaochengxu-loading-tishikuangyuyemiantiaozhua ...

  3. 一百零二：CMS系统之sweetalert提示框和使用

    实现效果 css body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: ...

  4. 一百零三：CMS系统之使用sweetalert提示框优化返回结果

    在base模板中引用 在修改密码的js中使用 $(function () { $('#submit').click(function (evnet) { evnet.preventDefault(); ...

  5. 提示框插件SweetAlert

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...

  6. The authenticity of host '172.16.33.53 (172.16.33.53)' can't be established的问题(日志六)

    用ssh登录一个机器(换过ip地址)会出现如下错误 weiguohui@weiguohui1-virtual-machine:~/.ssh$ ssh 172.16.33.53The authentic ...

  7. 漂亮的提示框SweetAlert使用教程

    一.简介 所使用过的弹出框插件,SweetAlert是最好用的.发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相 ...

  8. Flask实战-留言板-安装虚拟环境、使用包组织代码

    Flask实战 留言板 创建项目目录messageboard,从GreyLi的代码中把Pipfile和Pipfile.lock文件拷贝过来,这两个文件中定义了虚拟环境中需要安装的包的信息和位置,进入m ...

  9. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

随机推荐

  1. Mybatis中select传递多个参数

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  2. 【Atcoder】CODE FESTIVAL 2017 qual A D - Four Coloring

    [题意]给定h,w,d,要求构造矩阵h*w满足任意两个曼哈顿距离为d的点都不同色,染四色. [算法]结论+矩阵变换 [题解] 曼哈顿距离是一个立着的正方形,不方便处理.d=|xi-xj|+|yi-yj ...

  3. 【NOIP】提高组2012 国王游戏

    [题意] 恰逢H国国庆,国王邀请n位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这n位大臣排 成一排,国王站在队伍的最前面.排 ...

  4. 【HNOI】 小A的树 tree-dp

    [题目描述]给定一颗树,每个点有各自的权值,任意选取两个点,要求算出这两个点路径上所有点的and,or,xor的期望值. [数据范围]n<=10^5 首先期望可以转化为求树上所有点对的and,o ...

  5. 网络协议之HTTP协议

    HTTP协议详解(真的很经典) 转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HT ...

  6. 分布式队列Celery

    Celery是什么? Celery 是一个由 Python 编写的简单.灵活.可靠的用来处理大量信息的分布式系统,它同时提供操作和维护分布式系统所需的工具. Celery 专注于实时任务处理,支持任务 ...

  7. skb管理函数之alloc_skb、dev_alloc_skb、kfree_skb、dev_kfree_skb、consume_skb

    alloc_skb--分配skb dev_alloc_skb--分配skb,通常被设备驱动用在中断上下文中,它是alloc_skb的封装函数,因为在中断处理函数中被调用,因此要求原子操作(GFP_AT ...

  8. (十七)vmware无法将网络更改为桥接状态

    故障现象,导致虚拟机无法正常上网 设备管理器中的驱动设备正常加载,但是注意这两个虚拟网卡是有问题的 将这两个虚拟网卡删除 只剩物理网卡了,重新启动电脑 将虚拟机里的网络设置删除 清空网卡后点击恢复默认 ...

  9. 64_l4

    libnormaliz-devel-3.1.4-2.fc26.i686.rpm 23-May-2017 00:24 31214 libnormaliz-devel-3.1.4-2.fc26.x86_6 ...

  10. Mongo 配置文件 [www]

    Mongo 配置文件  [www] http://blog.chinaunix.net/uid-25206403-id-3510934.html mongodb 安装使用 http://blog.si ...