33、Flask实战第33天：sweetalert提示框

这节我们继续优化，接收到返回值，我们在前端做一些处理，如:密码修改成功，弹出一个成功的提示框。这个提示框我们采用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('网络错误');
            }
        });
    });
})