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