登录Form:
<form class="form-aaa" method="post"><%ES6, 7%>
<form class="form-aaa" action="${path}/user/dologin" method="post"> <%ES5%>
<h2 class="form-signin-heading">用户登录</h2>
<label for="username" class="sr-only">用户名</label>
<input type="text" id="username" name="name" class="form-control" placeholder="用户名" required autofocus>
<br />
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="pwd" class="form-control" placeholder="密码" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">
记住我 </label>
</div>
<input class="btn btn-lg btn-primary btn-block ajax-post" type="submit" value="登录" target-form="form-aaa">
</form>
ES5:
//dom加载完成后执行的js
$(function(){
//ajax post submit请求
$('.ajax-post').click(function(){
var target,query,form;
var target_form = $(this).attr('target-form');
var that = this;
if ($(this).attr('type')=='submit') {
form = $('.'+target_form);
query = form.serialize();
target = form.get(0).action;
$.post(target, query, function(data) {
if (data.code === 200) {
$.toast({
heading: '操作成功',
icon: 'success',//info, warning,error
showHideTransition: 'slide',//fade,plain
hideAfter: 2000,//ms
position: 'top-center'
});
setTimeout(function(){
if (data.info.url) {
window.location.href= data.info.url;
} else if( $(that).hasClass('no-refresh')){
$(that).removeClass('disabled').prop('disabled',false);
}else{
location.reload();
}
},2300);
}else{
$.toast({
heading: '操作失败',
text: data.info.info,
icon: 'error',
hideAfter: 2000,
position: 'top-center'
});
}
}, 'json');
}
return false;
});
});
ES6:
request.js
// 用promise对象封装
const request = (params) => {
return new Promise((resolve, reject) => {
$.ajax({
url: params.url,
type: params.type || 'get',
dataType: 'json',
headers: params.headers || {},
data: params.data || {},
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
});
};
$(function () {
$('.ajax-post').click(function(){
request({
url:"${path}/user/dologin",
type: 'post',
data:$("#userForm").serialize()
}).then(res => {
if(res.code === 200){
window.location.href= "${path}/user/main";
}else {
alert(res.info.info);
$.toast({
heading: '操作失败',
icon: 'error',
hideAfter: 2000,//ms
position: 'top-center'
});
}
});
});
});
ES7:
$(function () {
$('.ajax-post').on('click', clickHandler);
async function clickHandler() {
try {
const res = await request({
url:"${path}/user/dologin",
type: 'post',
data:$("#userForm").serialize() });
if(res.code === 200){
window.location.href= "${path}/user/main"; }
else {
alert(res.info.info); }
}
catch(err) {
console.log(err)
}
}
});