Struts2整合jQuery实现ajax异步登录
jQuery对ajax进行了封装，在jQuery中$.ajax()属于最底层的方法，第二层是load(),$.get(),$.post()方法，
第三层是$.getScrip()和$.getJSON()方法。下面是使用$.ajax()方法实现异步登录。
1.编写index.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>My JSP 'index.jsp' starting page</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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $('#send').click(function() { var params=$('input').serialize(); //将input元素序列化，返回JSON数据格式 $.ajax({ type: 'post', //请求方式为post方式 url: 'login.action', //请求地址 dataType: 'json', //服务器返回类型为JSON类型 data:params, //发送到服务器的数据 success:function(data){ //请求成功后的回调函数 $('#show').html(data.result); } }); }); }) </script> </head> <body> <center> <h2>登录页面</h2> <hr/> <div id="show"></div> <form id="logForm" method="post"> <table> <tr> <td><label>用户名：</label></td> <td><input type="text" id="username" name="user.username" ></td> </tr> <tr> <td><label>密码：</label></td> <td><input type="text" id="password" name="user.password" ></td> </tr> <tr> <td><input type="button" id="send" value="提交"></td> <td><input type="reset" value="重置"></td> </tr> </table> </form> </center> </body> </html> 2.配置struts.xml.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <package name="struts2" namespace="/" extends="json-default"> <action name="login" class="com.action.LoginAction"> <result type="json"></result> </action> </package> </struts>
3.User.java
package com.model; public class User { private String username; private String password; 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; } } 4.LoginAction.java
package com.action; import com.model.User; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class LoginAction extends ActionSupport { private User user; private String result; public User getUser() { return user; } public void setUser(User user) { this.user = user; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String execute() throws Exception{ result ="异步登录成功！"+"+用户名: "+user.getUsername()+" 密码: "+user.getPassword(); System.out.println(result); return SUCCESS; } }
openkk 
ajax 