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

    django分页 {% if is_paginated %} <div class="pagination-simple"> <!-- 如果当前页还有上一页,显示 ...

  2. Chrome 扩展开发资料

    中文文档(翻译自官方文档):https://crxdoc-zh.appspot.com/apps/tut_debugging 官方英文: https://developer.chrome.com/ex ...

  3. MSSQL数据库 事务隔离级别

    数据库事务的隔离级别有4个,由低到高依次为Read uncommitted .Read committed .Repeatable read .Serializable ,这四个级别可以逐个解 脏读 ...

  4. 2017-3-26 webpack入门（一）

    2017-3-26 webpack入门(一) webpack 前端 打包 最近项目里用到了webpack特意总结一下.来源:http://webpackdoc.com 1 概念 1.1 webpack ...

  5. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. Intel call指令

    转载:http://blog.ftofficer.com/2010/04/n-forms-of-call-instructions/ 最近有一个需求,给你个地址,看看这个地址前面是不是一个CALL指令 ...

  7. linux编程之共享内存

    linux 进程间通信(IPC)包括3种机制:消息队列.信号量.共享内存.消息队列和信号量均是内核空间的系统对象,经由它们 的数据需要在内核和用户空间进行额外的数据拷贝:而共享内存和访问它的所有应用程 ...

  8. ios IAP 内购验证

    参考我之前的笔记 苹果内购笔记,在客户端向苹果购买成功之后,我们需要进行二次验证. 二次验证 IOS在沙箱环境下购买成功之后,向苹果进行二次验证,确认用户是否购买成功. 当应用向Apple服务器请求购 ...

  9. HEER-Easing Embedding Learning by Comprehensive Transcription of Heterogeneous Information Networks

    来源:KDD 2018 原文:HEER code:https://github.com/GentleZhu/HEER 注: 若有错误,欢迎指正   这篇KDD’18的文章,没有按照常规的方法将所有的n ...

  10. XML、java解释XML、XML约束

    1.XML有什么用? (1)可以用来保存数据 (2)可以用来做配置文件 (3)数据传输载体 2.XML格式 XML 元素必须遵循以下命名规则: 名称可以含字母.数字以及其他的字符 名称不能以数字或者标 ...