Ajax实战篇

   这一次我们来使用ajax来实际做一个登陆的例子那么我们之前有一篇文章叫做《人事系统收获之MVC+EasyUI+EF

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

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

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 34
    评论
ajax经典实例+代码大全 绝对经典 -------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 -------------- 数据库安装说明 -------------- 了解MySQL的用户可以直接使用自己熟悉的方式创建名为ajax的数据库,并将ajax.sql文件导入即可。 下面是简要操作方法: 1. 实例数据库在MySQL 5.0.27 版本下测试通过 2. 将database目录中ajax.sql文件复制到C:\ 3. 进入MySQL安装目录中的bin目录 4. 输入 mysql -u root -p ,然后输入密码登录本地MySQL服务器 5. 输入 CREATE DATABASE ajax DEFAULT CHARACTER SET utf8; 创建名为ajax的数据库 6. 输入 use ajax 7. 输入 source c:\ajax.sql 执行数据库初始化语句 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件,部分Java源文件存放在java目录中。 可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。 ----------- WEB发布方法 ----------- 所有实例在jdk 1.4.2 + Tomcat 5.0.28 环境下测试通过。 将webapp目录中的内容复制到Tomcat的webapps目录中作为一个web应用发布即可。 启动Tomcat前注意修改 ajax/WEB-INF/classes/ajax_db.properties 文件。 将其中的URL、USER和PASSWORD属性根据实际情况进行修改。 Tomcat正常启动后使用 http://localhost:8080/ajax 进行访问 +=========================================================================================== 最后注释: 可能还有一点,就是把你的ajax密码定位好 路径是:${ajax}\ajax\WEB-INF\classes\ajax_db.properties,用记事本打开。那个${ajax}就是你当前存放ajax这个文件夹的路 径 DRIVERS=com.mysql.jdbc.Driver URL=jdbc:mysql://localhost/ajax?useUnicode=true&characterEncoding=utf8 USER=root PASSWORD=ajax 里面的代码是这样写的,把最后一行的那个对应的密码改为你自己数据库的代码就OK

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值