页面使用的是H+的开源框架
普通form表单登录页面
通过元素form的action属性，将数据提交给Servlet进行处理
好处：代码简单
劣势：服务器只能通过页面跳转给用户展示数据，比较占资源
异步（ajax）式登录页面
逐个获取表单中的元素，由ajax引擎向Servlet发起请求，再由ajax引擎接受Servlet返回的数据并通过DOM操作渲染到页面上
好处：节省服务器带宽同时可以在提交前通过ajax引擎对表单内容进行验证，提升了用户体验
劣势：代码变得复杂了许多
function login() {
//获取用户输入数据
var unameval = $("#unameid").val();
var pwdval = $("#pwdid").val();
var verifycodeval = $("#verifycodeid").val();
$.ajax({
url : "user.action",
type : "post",
data : {
cmd : "login",
username : unameval,
password : pwdval,
verifycode : verifycodeval
},
dataType : "json",
success : function(data) {
if (data.msgId == 1) {
window.location.href = "index.jsp";
} else if (data.msgId == 2) {
$("#passwordlabelid").html(data.msgContent);
} else if (data.msgId == 3) {
$("#verifycodelabelid").html(data.msgContent);
}
}
})
}
使用ajax-form插件做登录页面
好处：简化了代码
$("#loginform").ajaxForm({
beforeSubmit:function(){
$("#usernamelabelid").html("");
$("#passwordlabelid").html("");
$("#verifycodelabelid").html("");
//对表单做表单验证
var unameval = $("#unameid").val();
var pwdval = $("#pwdid").val();
var verifycodeval = $("#verifycodeid").val();
var unameflag = true;
var pwdflag = true;
var vcodeflag = true;
if(unameval.length == 0){
$("#usernamelabelid").html("请输入用户名")
unameflag = false;
}
if(pwdval.length == 0){
$("#passwordlabelid").html("请输入密码")
pwdflag = false;
}
if(verifycodeval.length == 0){
$("#verifycodelabelid").html("请输入验证码")
vcodeflag = false;
}
return unameflag && pwdflag && vcodeflag;
},
dataType : "json",
success : function(data) {
if (data.msgId == 1) {
window.location.href = "index.jsp";
} else if (data.msgId == 2) {
$("#passwordlabelid").html(data.msgContent);
} else if (data.msgId == 3) {
$("#verifycodelabelid").html(data.msgContent);
}
}
})
