加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax实战篇

发布时间:2020-12-16 01:48:22 所属栏目:百科 来源:网络整理
导读:这一次我们来使用ajax来实际做一个登陆的例子那么我们之前有一篇文章叫做《人事系统收获之MVC+EasyUI+EF 》中我提到过我说的项目所以我们要基于这个架构来进行学习的,那么我们主要对客户端进行讲解 HTML代码: div input type="text" placeholder="用户名"
这一次我们来使用ajax来实际做一个登陆的例子那么我们之前有一篇文章叫做《人事系统收获之MVC+EasyUI+EF

》中我提到过我说的项目所以我们要基于这个架构来进行学习的,那么我们主要对客户端进行讲解

HTML代码:

<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代码:

<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的综合使用的,具体的项目还要具体来说!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读