这节我们继续优化，接收到返回值，我们在前端做一些处理，如:密码修改成功，弹出一个成功的提示框。这个提示框我们采用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. 【C++对象模型】第五章 构造、解构、拷贝 语意学

    1.构造语义学 C++的构造函数可能内带大量的隐藏码,因为编译器会扩充每一个构造函数,扩充程度视 class 的继承体系而定.一般而言编译器所做的扩充操作大约如下: 所有虚基类成员构造函数必须被调用, ...

  2. iOS 隐藏导航栏下的黑线

    一.找到导航栏下的黑线 // 寻找导航栏下的黑线 - (UIImageView *)findHairlineImageViewUnder:(UIView *)view { if ([view isKi ...

  3. bzoj 2956: 模积和 ——数论

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  4. 五分钟学习Java8的流编程

    1.概述 Java8中在Collection中增加了一个stream()方法,该方法返回一个Stream类型.我们就是用该Stream来进行流编程的: 流与集合不同,流是只有在按需计算的,而集合是已经 ...

  5. 【洛谷 P2756】 飞行员配对方案问题（二分图匹配，最大流）

    题目链接 这不是裸的二分图匹配吗? 而且匈牙利算法自带记录方案.. 但既然是网络流24题,那就用网络流来做吧. 具体就是从源点向左边每个点连一条流量为1的边,两边正常连边,流量都是一,右边所有点向汇点 ...

  6. Super A^B mod C （快速幂+欧拉函数+欧拉定理）

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=1759 题目:Problem Description Given A,B,C, You should quick ...

  7. 【HNOI】 期望面积

    [题目描述]给定n个点,求这n个点组成凸包的期望面积.保证任意三点不共线. [数据范围]n<=100. 首先我们知道凸包面积的计算为所有在凸包上相邻的点的叉积和,那么我们可以枚举两个点,然后求出 ...

  8. linux系统引导流程

    1.固件:硬件和软件结合.加电自检是我们按下电源会检测硬件像cpu.内存.网卡等信息.(从硬件层次检测硬件是否可用) 固件设置实例:设置时间 软件时间和硬件时间: [root@VM_0_12_cent ...

  9. LCD实验学习笔记（七）：NAND FLASH

    s3c2440 CPU内置NAND FLASH控制器.相关寄存大器起始地址为0x4e000000. 通过设置NFCONF寄存器,设置NAND FLASH 时序. 通过设置NFCONT寄存器,使能NAN ...

  10. Python学习笔记 - day10 - 正则表达式

    正则表达式 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样 ...