Spring mvc新手入门(10)-ajax +spring mvc 3 实现异步登录

2014-12-14 10:18:05     26 人阅读    

前面第五篇文章 《5、Spring mvc 返回结果页面详解-跳转jsp页面和json串详解》  已经介绍了spring mvc返回json的方式,
本篇文章直接采用这种方式进行返回.

采用Spring MVC + Jquery +Spring JDBC 的方式进行ajax异步登录验证.


1、添加jquery支持(jquery使用太频繁了,如果大家不懂jquery,一定要抓紧学会....)
   本例子找个最新的jquery版本即可,自己baidu一个吧。
   在工程的WebRoot下新建js目录
   copy jquery-1.4.2.js 文件到目录下面
2、修改login.jsp 填写jquery异步ajax调用后台方法
    添加 <input type="button" value="ajaxLogin" onclick="login();">  调用ajax登录
   添加Jquery支持  <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>

修改后的login.jsp源代码为

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>login</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="./js/jquery-1.4.2.js"></script> 
  </head>
  
  <body>
    <form name="form1" action="hello.do?method=login" method="post">
 <table width="300" border="1">
     <tr>
         <td colspan="2">登录窗口</td>
     </tr>
     <tr>
             <td>用户名<td>
             <td><input type="text" name="name" id="name" size="10"></td>
     </tr>
     <tr>
             <td>密码</td>
             <td><input type="password" name="pass" id="pass" size="10"></td>
     </tr>
     <tr>
         <td colspan="2"><input type="submit" name="submit"
             value="登录"><input type="button" value="ajaxLogin" onclick="login();"> <a href="register.do?method=init">注册新用户</a></td>
     </tr>
 </table>
 </form>
  </body>
  <script type="text/javascript">   
    function  login()
    { 
        // alert($("#name").val());
        // alert($("pass").val());
          $.ajax( {
       type : "POST",
       url : "hello.do?method=ajaxLogin", //访问路径
       data : {name: $("#name").val(), pass: $("#pass").val()}, //参数
                success : function(msg) {
                        alert(msg);
            if (msg == 'success') {
               alert('登录成功');
            }  else {
               alert('登录失败');
            }
       },
       error:function(msg){ 
            alert("程序出错,请联系管理员");
       }
  });
 }
  </script> 
</html>
   
   


3、控制器添加json串返回
     HelloWorldController.java 添加ajax登录验证方法  ajaxLogin方法
    json的处理是直接通过response写入到返回值中的.
   

@RequestMapping(params = "method=ajaxLogin")
 public void ajaxLogin(HttpServletRequest request,PrintWriter printWriter) {
  Map<String,Object> hashMap = RequestUtil.getMap(request);
  HelloWorld hello = new HelloWorld(hashMap);
  boolean isLogin = hello.login();
  if(isLogin)
  {   
    printWriter.write("success"); 
          printWriter.flush(); 
          printWriter.close(); 
  }else
  {
    printWriter.write("fail"); 
          printWriter.flush(); 
          printWriter.close(); 
  }
  
 }
/**
  * 登录方法
  */
 public boolean login() {
  String name = map.get("name").toString();
  String pass = map.get("pass").toString();
  
  String querySql = "select count(1) from user where name='"+name+"' and pass ='"+pass+"'";
  int count = this.getJdbcTemplate().queryForInt(querySql);
  
  if(count >0)
  {
   return true;
  }else
  {
   return false;
  }
 }
     


4、重新部署访问.
      重新部署红访问 login.jsp页面,
      输入 www.itmmd.com  www.itmmd.com 然后点击ajaxLogin 提示登录成功..


原文地址:http://www.itmmd.com/201412/314.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

Java程序设计经典300例-输入的用户名找回用户密码   上一篇
下一篇  java Rest学习-第一个Java REST 服务(3)-分析和学习rest项目

精彩回复
#1楼    ; [评论人]:jency   [发表时间]:2014-12-14 13:06:54

我是插进来问个问题的,看你介绍了LIRS算法后自己尝试的程序一直有问题,你有木有LIRS算法的程序呢

发表评论
姓名:       

《程序员app》专门为程序员量身定做!