码迷,mamicode.com
首页 > Web开发 > 详细

Ajax

时间:2016-06-12 21:57:34      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:

范例:无刷新技术

1.dao包

a.BaseDao 类
  1 /**
  2  * 
  3  */
  4 package com.Elastic.SystemDemo.ivy.dao;
  5 
  6 import java.sql.Connection;
  7 import java.sql.DriverManager;
  8 import java.sql.PreparedStatement;
  9 import java.sql.ResultSet;
 10 import java.sql.SQLException;
 11 import java.util.List;
 12 
 13 import com.mysql.jdbc.Statement;
 14 
 15 /**
 16  * 描述类的基本功能<br/>
 17  * <p>
 18  * <h3>具体功能发布描述</h3>
 19  * </p>
 20  * @author     Ivy
 21  * @version    1.0
 22  * @date 2016年6月12日 上午11:00:00
 23  * @copyright Elastic
 24  */
 25 public class BaseDao {
 26 
 27 
 28     private static String url = "jdbc:mysql://localhost:3306/systemdemo";
 29     private static String user = "root";
 30     private static String password = "root";
 31 
 32     /**
 33      * 获取数据库连接对象
 34      * 
 35      * @return
 36      */
 37     public static Connection getConnection() {
 38 
 39         try {
 40             Class.forName("com.mysql.jdbc.Driver");
 41             return DriverManager.getConnection(url, user, password);
 42         } catch (ClassNotFoundException e) {
 43             e.printStackTrace();
 44         } catch (SQLException e) {
 45             e.printStackTrace();
 46         }
 47         return null;
 48     }
 49 
 50     public static int executeUpdate(String sql, List<?> params) {
 51 
 52         // 准备变量,用来保存数据库连接对象,执行命令的对象和结果
 53         Connection conn = null;
 54         PreparedStatement pstmt = null;
 55         int rows;
 56         try {
 57             // 获取数据连接对象
 58             conn = getConnection();
 59             pstmt = conn.prepareStatement(sql);
 60             // 设置参数
 61             if (params != null && params.size() > 0) {
 62 
 63                 for (int i = 0; i < params.size(); i++) {
 64                     pstmt.setObject(i + 1, params.get(i));
 65                 }
 66             }
 67             rows = pstmt.executeUpdate();
 68         } catch (SQLException e) {
 69             e.printStackTrace();
 70             rows = -1;
 71         } finally {
 72             closeAll(null, pstmt, conn);
 73         }
 74         return rows;
 75 
 76     }
 77 
 78     /**
 79      * 释放资源
 80      * 
 81      * @param rs
 82      *            结果集对象,如果没有填写null
 83      * @param pstmt
 84      *            执行SQL语句的对象,如果没有填写null
 85      * @param conn
 86      *            数据库连接对象,如果没有填写null
 87      */
 88     public static void closeAll(ResultSet rs, PreparedStatement pstmt, Connection conn) {
 89 
 90         try {
 91             if (rs != null) {
 92                 rs.close();
 93             }
 94             if (pstmt != null) {
 95                 pstmt.close();
 96             }
 97             if (conn != null) {
 98                 conn.close();
 99             }
100         } catch (SQLException e) {
101             e.printStackTrace();
102         }
103 
104     }
105 
106 }

b.类

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.dao;
 5 
 6 import java.io.Serializable;
 7 
 8 import com.Elastic.SystemDemo.ivy.entity.User;
 9 
10 /**
11  * 描述类的基本功能<br/>
12  * <p>
13  * <h3>具体功能发布描述</h3>
14  * </p>
15  * @author     Ivy
16  * @version    1.0
17  * @date 2016年6月12日 下午3:38:15
18  * @copyright Elastic
19  */
20 public interface UserDao {
21     User find(Serializable id);
22 }

2.dao.impl包

a.UserDaoImpl 类

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.dao.impl;
 5 
 6 import java.io.Serializable;
 7 import java.sql.Connection;
 8 import java.sql.PreparedStatement;
 9 import java.sql.ResultSet;
10 import java.sql.SQLException;
11 
12 import com.Elastic.SystemDemo.ivy.dao.BaseDao;
13 import com.Elastic.SystemDemo.ivy.dao.UserDao;
14 import com.Elastic.SystemDemo.ivy.entity.User;
15 import com.mysql.jdbc.Statement;
16 
17 
18 /**
19  * 描述类的基本功能<br/>
20  * <p>
21  * <h3>具体功能发布描述</h3>
22  * </p>
23  * @author     Ivy
24  * @version    1.0
25  * @date 2016年6月12日 下午3:37:36
26  * @copyright Elastic
27  */
28 public class UserDaoImpl implements UserDao{
29 
30     /* (non-Javadoc)
31      * @see com.Elastic.SystemDemo.ivy.dao.UserDao#find(java.io.Serializable)
32      */
33     @Override
34     public User find(Serializable id) {
35         User user = null;
36         String sql = "select * from user where userName = ?";
37         // 定义查询需要使用的SQL对象
38         Connection conn = null;
39         PreparedStatement pstmt = null;
40         ResultSet rs = null;
41 
42         try {
43             conn = BaseDao.getConnection();
44             pstmt = conn.prepareStatement(sql);
45             pstmt.setObject(1, id);
46 
47             rs = pstmt.executeQuery();
48 
49             if (rs.next()) {
50                 user = new User();
51                 user.setUserName(rs.getString("userName"));
52                 user.setPassWord(rs.getString("passWord"));
53                 user.setNickName(rs.getString("nickName"));
54             }
55         } catch (SQLException e) {
56             e.printStackTrace();
57             user = null;
58         } finally {
59             BaseDao.closeAll(rs,  pstmt, conn);
60         }
61 
62         return user;
63     }
64 
65 }

3.entity

a.User类

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.entity;
 5 
 6 import java.io.Serializable;
 7 
 8 /**
 9  * 描述类的基本功能<br/>
10  * <p>
11  * <h3>具体功能发布描述</h3>
12  * </p>
13  * @author     Ivy
14  * @version    1.0
15  * @date 2016年6月12日 下午3:39:14
16  * @copyright Elastic
17  */
18 public class User implements Serializable{
19     private String userName;
20     private String passWord;
21     private String nickName;
22     public String getUserName() {
23         return userName;
24     }
25     public void setUserName(String userName) {
26         this.userName = userName;
27     }
28     public String getPassWord() {
29         return passWord;
30     }
31     public void setPassWord(String passWord) {
32         this.passWord = passWord;
33     }
34     public String getNickName() {
35         return nickName;
36     }
37     public void setNickName(String nickName) {
38         this.nickName = nickName;
39     }
40     
41 }

4.control

a.UserServlet 类

 1 package com.Elastic.SystemDemo.ivy.control;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 import javax.servlet.http.HttpSession;
11 
12 import com.Elastic.SystemDemo.ivy.entity.User;
13 import com.Elastic.SystemDemo.ivy.service.UserService;
14 import com.Elastic.SystemDemo.ivy.service.impl.UserServiceImpl;
15 
16 /**
17  * Servlet implementation class UserServlet
18  */
19 public class UserServlet extends HttpServlet {
20     private static final long serialVersionUID = 1L;
21        
22     /**
23      * @see HttpServlet#HttpServlet()
24      */
25     public UserServlet() {
26         super();
27         // TODO Auto-generated constructor stub
28     }
29 
30     /**
31      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
32      */
33     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
34         //获取表单提交的内容
35         String userName = request.getParameter("userName");
36         String passWord = request.getParameter("passWord");
37         
38         //创建业务对象
39         UserService userService = new UserServiceImpl();
40         User user = userService.login(userName, passWord);
41         String msg = "";
42         boolean success;
43         String data = "";
44         
45         if (null == user) {
46             success = false;
47             msg = "登录失败!";
48         } else {
49             success = true;
50             
51             //保存登录信息到session中
52             HttpSession session = request.getSession();
53             session.setAttribute("loginUser", user);
54             msg = "登录成功!";
55             
56             //键值对
57             data = "{\"userName\" : \" " + user.getUserName() + " \"}";
58         }
59         
60         //响应Ajax请求的信息
61         PrintWriter out = response.getWriter();
62         //json对象
63         out.write("{\"success\" : " + success + ",\"msg\":\"" + msg + "\",\"data\" : " + data + "}");
64         //刷新
65         out.flush();
66         //关闭资源
67         out.close();
68     }
69 
70     /**
71      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
72      */
73     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
74         // TODO Auto-generated method stub
75         doGet(request, response);
76     }
77 
78 }

 

b.SystemServlet 类

 1 package com.Elastic.SystemDemo.ivy.control;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 /**
10  * Servlet implementation class SystemServlet
11  */
12 public class SystemServlet extends HttpServlet {
13     private static final long serialVersionUID = 1L;
14        
15     /**
16      * @see HttpServlet#HttpServlet()
17      */
18     public SystemServlet() {
19         super();
20         // TODO Auto-generated constructor stub
21     }
22 
23     /**
24      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
25      */
26     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
27         // TODO Auto-generated method stub
28         this.doPost(request, response);
29     }
30 
31     /**
32      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
33      */
34     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
35         request.getSession().invalidate();
36     }
37 
38 }

5.filter

a.EncodingFilter 类

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.filter;
 5 
 6 import java.io.IOException;
 7 
 8 import javax.servlet.Filter;
 9 import javax.servlet.FilterChain;
10 import javax.servlet.FilterConfig;
11 import javax.servlet.ServletException;
12 import javax.servlet.ServletRequest;
13 import javax.servlet.ServletResponse;
14 
15 /**
16  * 描述类的基本功能<br/>
17  * <p>
18  * <h3>具体功能发布描述</h3>
19  * </p>
20  * @author     Ivy
21  * @version    1.0
22  * @date 2016年6月12日 下午4:14:39
23  * @copyright Elastic
24  */
25 public class EncodingFilter implements Filter{
26 
27     /* (non-Javadoc)
28      * @see javax.servlet.Filter#destroy()
29      */
30     @Override
31     public void destroy() {
32         // TODO Auto-generated method stub
33         
34     }
35 
36     /* (non-Javadoc)
37      * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)
38      */
39     @Override
40     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
41             throws IOException, ServletException {
42         request.setCharacterEncoding("utf-8");
43         response.setCharacterEncoding("utf-8");
44         chain.doFilter(request, response);
45     }
46 
47     /* (non-Javadoc)
48      * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
49      */
50     @Override
51     public void init(FilterConfig arg0) throws ServletException {
52         // TODO Auto-generated method stub
53         
54     }
55 
56 }

6.service

a.UserService

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.service;
 5 
 6 import com.Elastic.SystemDemo.ivy.entity.User;
 7 
 8 /**
 9  * 描述类的基本功能<br/>
10  * <p>
11  * <h3>具体功能发布描述</h3>
12  * </p>
13  * @author     Ivy
14  * @version    1.0
15  * @date 2016年6月12日 下午3:47:32
16  * @copyright Elastic
17  */
18 public interface UserService {
19     User login(String userName, String passWord);
20 }

7.service.impl

a.UserServiceImpl 类

 1 /**
 2  * 
 3  */
 4 package com.Elastic.SystemDemo.ivy.service.impl;
 5 
 6 import com.Elastic.SystemDemo.ivy.dao.UserDao;
 7 import com.Elastic.SystemDemo.ivy.dao.impl.UserDaoImpl;
 8 import com.Elastic.SystemDemo.ivy.entity.User;
 9 import com.Elastic.SystemDemo.ivy.service.UserService;
10 
11 /**
12  * 描述类的基本功能<br/>
13  * <p>
14  * <h3>具体功能发布描述</h3>
15  * </p>
16  * @author     Ivy
17  * @version    1.0
18  * @date 2016年6月12日 下午3:49:21
19  * @copyright Elastic
20  */
21 public class UserServiceImpl implements UserService {
22     private UserDao userDao = new UserDaoImpl();
23     
24     /* (non-Javadoc)
25      * @see com.Elastic.SystemDemo.ivy.service.UserService#login(java.lang.String, java.lang.String)
26      */
27     @Override
28     public User login(String userName, String passWord) {
29         User user = userDao.find(userName);
30         if (null != user && user.getPassWord().equals(passWord)) {
31 //            密码设为null,不记录passWord
32             user.setPassWord(null);
33             return user;
34         }
35         return null;
36     }
37 
38 }

8.jsp文件

a.nav-top.jsp

 1 <%-- 引入JSP页面PAGE指令 --%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <%-- 引入JSTL标签指令 --%>
 5 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 6 
 7 <c:if test="${empty sessionScope.loginUser }">
 8     <ul class="list-inline pull-right">
 9         <li><a href="javascript:;" data-toggle="show-login">登录</a></li>
10         <li><a href="javascript:;" data-toggle="reg">注册</a></li>
11     </ul>
12 </c:if>
13 
14 <c:if test="${not empty sessionScope.loginUser }">
15     <ul class="list-inline pull-right">
16         <li><a href="javascript:;" >${sessionScope.loginUser.nickName}</a></li>
17         <li><a href="javascript:;" data-toggle="logout">退出</a></li>
18     </ul>
19 </c:if>

b.login.jsp

 1 <%-- 引入JSP页面PAGE指令 --%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <%-- 引入JSTL标签指令 --%>
 5 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 6 
 7 <!-- 局部页面 -->
 8 <div class="panel panel-default" style="width: 300px;">
 9     <div class="panel-heading">登录</div>
10     <div class="panel-body">
11         <form action="" class="form-horizontal" id="login-form">
12             <div class="form-group">
13                 <label for="userName" class="col-md-3 control-label">账号:</label>
14                 <div class="col-md-9">
15                     <input class="form-control" id="userName" name="userName" type="text" autocomplete="off"/>
16                 </div>
17                 <div class="col-md-12"></div>
18             </div>
19             <div class="form-group">
20                 <label for="passWord" class="col-md-3 control-label">密码:</label>
21                 <div class="col-md-9">
22                     <input class="form-control" id="passWord" name="passWord" type="password" autocomplete="off"/>
23                 </div>
24                 <div class="col-md-12"></div>
25             </div>
26             <div class="form-group">
27                 <a href="" class="btn btn-primary btn-block" data-toggle="login">登录</a>
28             </div>
29             <div class="form-group" class="text-center">
30                 
31             </div>
32         </form>
33     </div>
34     
35 </div>
36 
37 <script type="text/javascript">
38     $(function() {
39         $(‘a[data-toggle="login"]‘).on(‘click‘,function(){
40             $.ajax({
41                 url : ‘user/login‘,
42                 type : ‘post‘,
43                 dataType : ‘json‘,
44                 data : $(‘#login-form‘).serialize(),
45                 beforeSend : function () {
46                     //return false;
47                     var userName = $(‘#userName‘).val();
48                     if (‘‘ == userName) {
49                         //alert(‘用户名不为空‘);
50                         $(‘#userName‘).parent().next().html(‘账户不能为空‘);
51                         return false;
52                     } else {
53                         $(‘#userName‘).parent().next().html(‘‘);
54                     }
55                     
56                     var passWord = $(‘#passWord‘).val();
57                     if (‘‘ == passWord) {
58                         //alert(‘密码不为空‘);
59                         $(‘#passWord‘).parent().next().html(‘密码不能为空‘);
60                         return false;
61                     } else {
62                         $(‘#passWord‘).parent().next().html(‘‘);
63                     }
64                 },
65                 success : function (result) {
66                     if (result.success) {
67                         $(‘a[data-toggle="show-login"]‘).trigger(‘click‘);
68                         //$(‘#nav-top‘).html(result.data.userName);
69                         $(‘#nav-top‘).load(‘nav-top.jsp‘);
70                     }
71                 },
72                 error : function() {
73                     //alert(‘服务器异常!‘);    
74                     $(‘#login-form‘).children().last().html(‘服务器异常!‘);
75                 }
76             });
77         });
78     });
79 </script>    
80     
81     

 

c.index.jsp

 1 <%-- 引入JSP页面PAGE指令 --%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <%-- 引入JSTL标签指令 --%>
 5 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 6 <!DOCTYPE html>
 7 <html language="zh-CN">
 8 <head>
 9     <meta charset="utf-8">
10     <!-- 设置浏览器渲染的引擎  -->
11     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12     <!-- 设置支持移动设备  -->
13     <meta name="viewport" content="width=device-width, initial-scale=1">
14     <title></title>
15     <!-- 引用bootstrap样式 -->
16     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
17 </head>
18 <body>
19     <div class="container-fluid">
20         <div class="container" id="nav-top">
21             <!-- <ul class="list-unstyle pull-right">
22                 <li><a href="javascript:;" data-toggle="show-login">登录</a></li>
23                 <li><a href="javascript:;" data-toggle="reg">注册</a></li>
24             </ul> -->
25             <jsp:include page="nav-top.jsp" flush="true"></jsp:include>
26         </div>
27     </div>
28     
29     <!-- 引用外部JS文件  -->
30     <script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
31     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
32     <script type="text/javascript">
33         $(function(){
34             $(‘#nav-top‘).on(‘click‘,‘a[data-toggle="logout"]‘,function(){
35                 $.ajax({
36                     url : ‘user/logout‘,
37                     success : function(result) {
38                         $(‘#nav-top‘).load(‘nav-top.jsp‘);
39                     }
40                 });
41             });    
42             
43             $(‘#nav-top‘).on(‘click‘,‘a[data-toggle="show-login"]‘,function(){
44                 
45                 var isShow = $(this).data(‘show‘);
46                 if(isShow){
47                     $(this).data(‘showContent‘).remove();
48                     $(this).data(‘show‘,false);
49                     return; 
50                 }
51                 
52                 //创建一个浮动的登录层
53                 var $div = $(‘<div id="ajax-login" class=""></div>‘);
54                 $(this).data(‘show‘,true);
55                 $(this).data(‘showContent‘,$div);
56                 
57                 $div.css({
58                     ‘position‘ : ‘absolute‘,
59                     ‘z-index‘ : ‘99‘,
60                     ‘width‘ : ‘300px‘,
61                     ‘height‘ : ‘300px‘,
62                     ‘top‘ : ($(document).width - 300) / 2 + ‘px‘,
63                     ‘left‘ : ($(document).height - 300) / 2 + ‘px‘
64                 });
65                 
66                 $div.load(‘login.jsp‘);
67                 $(‘body‘).append($div);
68                 
69             });
70             
71             
72             
73             
74         });    
75     
76     
77     </script>
78 </body>
79 </html>

 

/**
 *
 */
package com.Elastic.SystemDemo.ivy.entity;

import java.io.Serializable;

/**
 * 描述类的基本功能<br/>
 * <p>
 * <h3>具体功能发布描述</h3>
 * </p>
 * @author     Ivy
 * @version    1.0
 * @date 2016年6月12日 下午3:39:14
 * @copyright Elastic
 */
public class User implements Serializable{
    private String userName;
    private String passWord;
    private String nickName;
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassWord() {
        return passWord;
    }
    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
    public String getNickName() {
        return nickName;
    }
    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
    
}

Ajax

标签:

原文地址:http://www.cnblogs.com/ivy-xu/p/5578759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!