第一步:jsp页面body里面准备一个div
<div class="alert"></div>
第二步:准备一些共用样式css
<style type="text/css">
#getVerifyCode{cursor: pointer; outline: none;}
.alert {
display: none;
position: fixed;
top: 50%;
left: 50%;
min-width: 200px;
margin-left: -100px;
z-index: 99999;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
</style>
第三步:根据返回结果使用弹出自动消失alert
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/user/setNewPwd",
data: {phone:phone,verifyCode:verifyCode,newPwd:newPwd},
dataType: "json",
success: function(data){
if(data.status == 500){
$('.alert').html('密码修改成功').addClass('alert-success').show().delay(2500).fadeOut();
//$('<div>').appendTo('body').addClass('alert alert-success').html('操作成功').show().delay(1500).fadeOut( );
//跳转url
doReload();
}else if(data.status == 502){
alert("验证码不一致!");
}else{
alert("网络异常!");
}
}
});
第四步:测试