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;
}
}
本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1148263，如需转载请自行联系原作者
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif)
