这节我们继续优化，接收到返回值，我们在前端做一些处理，如:密码修改成功，弹出一个成功的提示框。这个提示框我们采用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. jenkins修改job默认名字

    ${GIT_BRANCH,fullName="false"}-${BUILD_NUMBER}-${GIT_REVISION,length=12}-${deploy_rollback ...

  2. spring怎么实现单例模式？

    Spring学习之路——单例模式和多例模式   在Spring中,bean可以被定义为两种模式:prototype(多例)和singleton(单例) singleton(单例):只有一个共享的实例存 ...

  3. 详解JS中Number()、parseInt()和parseFloat()的区别

    三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt().parseFloat(): 专门用于把字符串转换成数值: 一.Number( ): (1)如果是Boolean ...

  4. Python3 json、pickle序列化与反序列化

    注意:可以dumps多次,loads只能一次,一般我们只dumps一次,loads一次,多个版本就写入多个文件 一.json序列化与反序列化: 支持各种语言数据交互,但只能处理字典,列表,集合等简单的 ...

  5. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  6. Django rest framework + Vue简单示例

    构建vue项目参考这篇文章https://segmentfault.com/a/1190000008049815 一.创建Vue项目 修改源:npm config set registry https ...

  7. python之requests库使用问题汇总

    一.请求参数类型 1.get requests.get(url, data, cookies=cookies) url:字符串: data:字典类型,可以为空: cookies:字典类型,可以为空: ...

  8. XCopy复制文件夹命令及参数详解以及xcopy拷贝目录并排除特定文件

    XCOPY是COPY的扩展,可以把指定的目录连文件和目录结构一并拷贝,但不能拷贝系统文件:使用时源盘符.源目标路径名.源文件名至少指定一个:选用/S时对源目录下及其子目录下的所有文件进行COPY.除非 ...

  9. [New learn]GCD其他方法的使用

    https://github.com/xufeng79x/GCDDemo 1.简介 在前面的两篇博文中我介绍了GCD的一般使用方法和死锁的分析调查.本博文中继续讲解GCD的其他比较常用的几个使用方法. ...

  10. 前趋图和PV操作