这节我们继续优化，接收到返回值，我们在前端做一些处理，如:密码修改成功，弹出一个成功的提示框。这个提示框我们采用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. Chrome浏览器启动页被360导航篡改解决方法

    右键Chrome浏览器快捷方式,选择“属性”,在“目标”的结尾处有添加的网址,删了即可. 2 如果在结尾处没有任何网址,可以添加“ -nohome”,这样下次启动时,就会打开一个空白页,也就不会打开被 ...

  2. 【bzoj3476-懒惰的奶牛】线段树

    题解: 感觉这题和别人的做法不一样...呵呵呵...调了一百年.. 设家坐标为(a,b),对于每个点(x,y),可以转化为|a-x|+|b-y|<=k 对于每个点,它的影响范围是一个菱形(也就是 ...

  3. 【BZOJ】1188 [HNOI2007]分裂游戏

    [算法]博弈论 [题解] 我们的目的是把游戏拆分成互不影响的子游戏,考虑游戏内的转移. 如果把每堆视为子游戏,游戏之间会相互影响,不成立. 将每堆的一个石子视为子游戏,其产生的石子都在同一个子游戏中. ...

  4. vue装逼神器简述

    主要是分享下用vuejs开发项目过程中遇到的问题,vuejs开发的优势和需要注意的地方. 项目主要页面:主页,最新,分类,分类列表,详情页,结果页,斗图(列表,制作页) 效果图: 地址:https:/ ...

  5. javascript语言中的一等公民-函数

    简介 在很多传统语言(C/C++/Java/C#等)中,函数都是作为一个二等公民存在,你只能用语言的关键字声明一个函数然后调用它,如果需要把函数作为参数传给另一个函数,或是赋值给一个本地变量,又或是作 ...

  6. 编写jquery Plugin

    编写jquery插件的原则 1.给$.fn绑定函数,实现插件的代码逻辑 2.插件函数最后要return this,以支持链式调用 3.插件函数要有默认值,绑定在$.fn.<pluginName& ...

  7. bzoj 1854 游戏 二分图匹配 || 并查集

    题目链接 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的 ...

  8. /proc/diskstats文件注解

    /proc/diskstats 注解 今儿在准备利用shell监控磁盘读写次数等信息时,看到该文件,但是又不清楚每段的具体含义,这里备注下. 文件内容 [root@namenode proc]# ca ...

  9. mysql 之修改初始密码

    转载自:https://www.cnblogs.com/ivictor/p/5142809.html 为了加强安全性,MySQL5.7为root用户随机生成了一个密码,在error log中,关于er ...

  10. 【转】Android - Binder机制

    以下几篇文章是分析binder机制里讲得还算清楚的 目录 1. Android - Binder机制 - ServiceManager 2. Android - Binder机制 - 普通servic ...