这一次我们来使用ajax来实际做一个登陆的例子那么我们之前有一篇文章叫做《人事系统收获之MVC+EasyUI+EF
ajax代码:
我们可以看出其实ajax就是JavaScript代码然后加上xml的综合使用的,具体的项目还要具体来说!
》中我提到过我说的项目所以我们要基于这个架构来进行学习的,那么我们主要对客户端进行讲解
HTML代码:
<div>
<input type="text" placeholder="用户名" required="" id="username" οnkeydοwn="KeyDown()" />
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" οnkeydοwn="KeyDown()" />
</div>
<div>
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span></div>
<input name="submit" type="button" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px" onclick ="login()"/>
ajax代码:
<script type="text/javascript">
//调用js登陆方法验证用户名,和密码 如果通过,条页面!
function login() {
//获取用户名和密码
var userid = $("#username").val();
var password = $("#password").val();
//验证用户名不为空
if (userid == "" || null ) {
$.messager.alert("提示", "请输入用户名", "info");
return;
}
//验证密码不为空
else if (password == "" || null) {
$.messager.alert("提示", "请输密码", "info");
return;
} else {
//验证通过,调用LoginController中的confirmation()方法,去B层验证密码是否正确
$.ajax({
url: "/Login/confirmation",
data: { userid: userid, password: password }, //传入的数据
type: "POST", //返回的类型
dataType: 'text',
success: function (data) { //接收返回的数据 判断 成功则跳页面,失败则返回
if (data == "OK") {
//$.messager.alert("提示", "登陆成功,请您重新输入!", "info");
// //location.reload(true);
window.location.href = "../Main/Main";//你可以跟换里面的网址,以便成功后跳转
//$("#myTable").hide("slow");
//$("#success").show("slow");
} else if (data == "error") {
$.messager.alert("提示", "用户名或密码不正确,请您重新输入!", "info");
//$("#error").show("slow");
//$("#load").hide("slow");
}else{
alert("输入异常,请重新输入!");}
},
error: function () { alert("输入异常,请重新输入!") }, //错误提示
});
}
}
function KeyDown() {
$('#password').keypress(function (event) {
if (event.keyCode == 13) {
login();
}
})
$('#username').keypress(function (event) {
if (event.keyCode == 13) {
login();
}
})
}
</script>
我们可以看出其实ajax就是JavaScript代码然后加上xml的综合使用的,具体的项目还要具体来说!