创建一个消息提示方法
/**
* 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示3秒
* 后面的消息会覆盖原来的消息
* @param message:待显示的消息
* @param type:消息类型,0:错误消息,1:成功消息
*/
function showMessage(message, type) {
let messageJQ= $("<div class='showMessage'>" + message + "</div>");
if (type == 0) {
messageJQ.addClass("showMessageError");
} else if (type == 1) {
messageJQ.addClass("showMessageSuccess");
}
// 先将原始隐藏,然后添加到页面,最后以400毫秒的速度下拉显示出来
messageJQ.hide().appendTo("body").slideDown(400);
// 4秒之后自动删除生成的元素
window.setTimeout(function() {
messageJQ.show().slideUp(400, function() {
messageJQ.remove();
})
}, 4000);
}
css样式
.showMessage {
padding: 10px 20px;
border-radius: 5px;
position: fixed;
top: 15%;
left: 50%;
color: #ffffff;
z-index: 999;
transform: translate(-50%, 0);
}
.showMessageSuccess {
background-color: #f0f9eb;
border: 1px solid #E1F3D8;
color: #67c23a;
}
.showMessageError {
background-color: #fef0f0;
border: 1px solid #fde2e2;
color: #F76C6C;
}
使用消息提示框
let data = {
cellPhone: $("#phone2").val(),
verifyCode: $("#authcode2").val(),
password: $.md5($("#newpwd3").val()),
passMd5ed: true
}
$.ajax({
type: "put", // 请求方式
contentType: "application/json",
url: register + "v1/register", // 地址,就是json文件的请求路径
dataType: "json", // 数据类型可以为 text xml json script jsonp
data: JSON.stringify(data),
success: function(res) { // 返回的参数就是 action里面所有的有get和set方法的参数
if (res.resultCode === "00000000") {
// 成功消息
showMessage("注册成功", 1);
} else {
// 失败消息
showMessage(res.resultMsg, 0);
}
}
});