[2016-09-11]Ajax+js实现异步登录

接触前端这么久总感觉自己还在门外徘徊，所以打算复习+重新学习以前做过项目和实现的功能点。最近在做JavaWeb实训，感觉之前的实训像是被自己水过去了，这次还是打算要认真一点了。

好久没有写代码的缘故，不管前端还是后端感觉到陌生，尤其是JS,之前为了偷懒一直在用jQuery导致现在都不怎么会用源生的js了。这段实训时间还是打算暂时不用框架，从最基础的内容完整的来一遍。废话不多讲，总结一下今天完成的异步登录。

login.html

<span style="font-size:18px;"><p>登陆</p></span>
<span style="font-size:18px;">	<form action="login" method="post" name="form1">
<input type="text" id="name" placeholder="请输入用户名" name="name" />
<input type="text" id="password" placeholder="请输入密码" name="password"/>
<input id="submit" type="submit" value="登陆" / >
</form></span>

下面是JS代码
<script>
var url="index/user/list.do";
document.getElementById("submit").onclick=function(){
var name=document.getElementById("name").value;
var password=document.getElementById("password").value;

if(name=="") {
alert("账号不能为空");
document.getElementById("name").focus();
return;
}
else if(password==""){
alert("密码不能为空");
document.getElementById("password").focus();
return;
}
else{
$.ajax({
url:url,
data:'username'+name+'password'+password,
success:function(msg){
var data=msg;
if(0<data.length&&data.length<10){
document.getElementById("msg").innerHTML='<span style="color:red;font-size:14px">'
+data+'<a href="#" style="color:blue;font-size:14px" onclick="location.reload()">请重新登录</a><span><br><br>'
}
else{
document.form1.submit();
}
},
error:function(){
alert("登录验证失败...请刷新页面重新登录...");
}
});
}

}
</script>