[2016-09-11]Ajax+js非同期ログインを実現
1771 ワード
接触の先端がこんなに長い間、自分がまだドアの外をうろうろしているような気がするので、以前にやったプロジェクトや実現した機能点を復習+やり直したいと思っています.最近JavaWebの実习をしていて、前の実习は自分の水に流されたような気がしますが、今回はやはりまじめにするつもりです.
長い間コードを書いていないので、フロントエンドでもバックエンドでも見慣れない感じがします.特にJSは、これまでサボってjQueryを使っていたので、今ではソース生のjsをあまり使いませんでした.この実訓の時間はやはりしばらくフレームワークを使わずに、最も基礎的な内容から完全に1回来るつもりです.くだらないことは言わないで、今日完成した非同期ログインをまとめてみましょう.
login.html
次はJSコードです
長い間コードを書いていないので、フロントエンドでもバックエンドでも見慣れない感じがします.特にJSは、これまでサボってjQueryを使っていたので、今ではソース生のjsをあまり使いませんでした.この実訓の時間はやはりしばらくフレームワークを使わずに、最も基礎的な内容から完全に1回来るつもりです.くだらないことは言わないで、今日完成した非同期ログインをまとめてみましょう.
login.html
次はJSコードです
var url="index/user/list.do";
document.getElementById("submit").οnclick=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" οnclick="location.reload()"> </a><span><br><br>'
}
else{
document.form1.submit();
}
},
error:function(){
alert(" ... ...");
}
});
}
}