》中我提到过我说的项目所以我们要基于这个架构来进行学习的,那么我们主要对客户端进行讲解
- <div>
- <input type="text" placeholder="用户名" required="" id="username" onkeydown="KeyDown()" />
- </div>
- <div>
- <input type="password" placeholder="密码" required="" id="password" onkeydown="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代码:
我们可以看出其实ajax就是JavaScript代码然后加上xml的综合使用的,具体的项目还要具体来说!
- <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>