jQuery Ajax应用：以用户登陆为例

2018-08-12 浏览次数:

一、简介

jQuery Ajax 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
优点：响应速度更快
下面就以用户登陆为例来说明一下Ajax的具体实现

二、详细说明

首先来说一下整个项目具体的结构，这里采用三层架构实现，即表示层(web)、业务逻辑层(service)、数据访问层(dao)。
下面是具体的结构，如图

其中util为工具包，里面包含数据库链接类、以json结果返回类和输出类。bean里面为实体分装用户对象。
页面部分以jsp为载体，login.jsp、loginsuccess.jsp、index.jsp 其中index是为了在启动是跳转到login.jsp而存在的。index由web.xml配置。
login.js:具体的ajax方法。

该程序就是通过单击事件调用js中的以ajax为主体的方法，然后调用servlet，再调用service，在调用dao，结果以逆向方式返回，最终servlet返回一个json字符串给ajax,由ajax在页面响应结果是否正确。

三、代码

1.login.js

//登录的方法
function login(){
    var name=$("#name").val();//通过id获取数据
    var password=$("#password").val();
    $.ajax({
        url:contextPath+"/Login",
        method:"post",
        data:{action:"check",name:name,password:password},
        success:function(jsonStr){
        	 var result = eval("("+jsonStr+")");
            if(result.status==1){
            	alert(result.data);
                window.location.href=contextPath+"/pre/loginsuccess.jsp";
            }else{
            	alert(result.message);
            }
        }
    })
}

(1) 其中 var name=$(“#name”).val();就是通过id从表单中获取name的值
(2) url:contextPath+”/Login”: 就是要访问的servlet的路径
contextPath是在login.jsp通过引入c标签，获取的当前根目录的路径

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script type="text/javascript">
var contextPath="${ctx}";
</script>

(3) method:以post方式请求，这里请求的就是servlet中的doPost方法。
(4) data：就是所要传输的数据以及在servlet中调用的相应的方法。
(5) success:就是当执行成功时，接收servlet返回的json串，通过json串判断具体执行哪个方法。

2.Login.java

@WebServlet(urlPatterns = { "/Login" }, name = "Login")
public class Login extends HttpServlet {

	@SuppressWarnings("rawtypes")
	public Class getServletClass(){
		return Login.class;
	}
	 @Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req,resp);
	}

	@SuppressWarnings("unchecked")
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		 String actionIndicator = req.getParameter("action");//获取servlet返回的字符串特指action
		 Method method = null;
	      //  Object result = null;
	      
            try {
            	//获取该类所需求的方法,这里指获取check方法
				method = getServletClass().getDeclaredMethod(actionIndicator, HttpServletRequest.class, HttpServletResponse.class);
				//执行方法
				method.invoke(this, req, resp);//方法实现	
			} catch (NoSuchMethodException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (SecurityException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IllegalAccessException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IllegalArgumentException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (InvocationTargetException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
           
	}

	/**
     * 登陆的方法
     * @param request
     * @return
     */
public ReturnResult check(HttpServletRequest request, HttpServletResponse response) {
	    ReturnResult result=new ReturnResult();
		boolean flag=false;
		String name=request.getParameter("name");
		 String password=request.getParameter("password");
		PersonService per=new PersonService();
		flag=per.check(name, password);
		System.out.println(name);
		if(flag==true) {

			result.returnSuccess("登陆成功");
			 PrintUtil.write(result, response);//向ajax传值
		}else {
			result.returnFail("登陆失败");
			 PrintUtil.write(result, response);
	
		}
		  
		return result;
	}


      
}

(1) 在该servlet中，重写了doPost和doGet方法，通过ajax请求的方式而调用相应的方法，这里都是调用doPost方法
注意：由于servlet只会调用它原本由的方法，即你重写的它的原方法，要想调用自己写的方法，就需要在那些原有方法中执行自己写的方法。当然，也不是简单的调用，为了在调用的方法中再次实现servlet，则需要用下面的方法：

//getServletClass()
public Class getServletClass(){
		return Login.class;
	}
//在doPost中调用所要调用的方法
String actionIndicator = req.getParameter("action");//获取servlet返回的字符串特指action
		 Method method = null;
//获取该类所需求的方法,这里指获取check方法
method = getServletClass().getDeclaredMethod(actionIndicator, HttpServletRequest.class, HttpServletResponse.class);
//执行方法
method.invoke(this, req, resp);//方法实现

这时项目在运行时会通过doPost再次调用check方法，最终完成具体操作。

3.如何返回json串
(1) ReturnResult.java

private int status;
private Object data;

public ReturnResult returnSuccess(Object obj){
       this.status=Constants.ReturnResult.SUCCESS;
       this.data=obj;
       return this;
   }

(2)Constants.java

/**
  * json 格式返回数据的 status 标示说明
  */
 public static interface ReturnResult{
     public static int SUCCESS=1;
     public static int FAIL=-1;
 }

所以有上面可以知道，它会返回一个ReturnResult，其中包含status和data
然后通过PrintUtil.java转化成json串，以响应的方式来返回个ajax
`
public class PrintUtil {

private static void print(String msg,HttpServletResponse response){
    PrintWriter writer=null;
    try {
        if(null != response){
            writer=response.getWriter();
            writer.print(msg);
            writer.flush();
        }
    } catch (IOException e) {
        e.printStackTrace();
    }finally {
        writer.close();
    }
}
public static void write(Object obj,HttpServletResponse response){
    response.setContentType("text/html; charset=utf-8");
    String json = JSONObject.toJSONString(obj);
    print(json,response);
}

}
`

注:

所做的分析都是笔者自己的见解，如有不正确还请见谅。
另外，如需代码请访问我的Github：https://github.com/Zxnaruto