struts1.x与jQuery的完美整合方式之一
struts2提供了新的<s:>标签来提高对ajax的支持，而struts1.x的标签不支持AJAX(因为没有ID属性，无法取得DOM），一直让struts1.x+ajax用户不爽，网上提供了一些方法，但我感觉有些莫名其妙。在研究登录表单的SSH整合中，运用jquery的$.ajax提交表单时候，发现可以与struts1.x的*.do完美结合。
说完美结合，原因是对于已经配置好的SSH，无需修改任何配置文件，只要修改对应action和jsp页面，最后插入自建的js文件即可。
修改jsp页面：
1.去掉struts的<html>和<bean>标签,用传统的<form>、<input>、<button>改写。
2.增加<div>显示验证信息。
3.增加javascript 文件引用，引用jquery库文件和自建的js文件。
代码如下：（login.jsp,已经由struts1.x生成LoginAction，配置文件都不用改。
<%@ page language=”java” pageEncoding=”UTF-8″%>
<html>
<head>
<script type=”text/javascript” src=”js/jquery-1.2.6.js”></script>
<script type=”text/javascript” src=”js/validate.js”></script>
<title>JSP for LoginForm form</title>
</head>
<body>
<form action=”login.do” id=”form” method=”post”>
username :
<input type=”text” id=”username” name=”username” />
<br />
pasword :
<input type=”text” id=”password” name=”password” />
<input type=”button” value=”AJAX提交” id=”ajaxsubmit” name=”ajaxsubmit” />
<input type=”submit” value=”普通提交” />
<div id=”message” name=”message”></div>
</form>
</body>
</html>
LoginAction修改ActionForward的execute(),把LoginForm窗口类相关去掉。用request.getParameter取得参数。其他都不用改。
代码如下：
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)throws IOException {
//LoginForm loginForm = (LoginForm) form;
String username=request.getParameter(”username”);
String password=request.getParameter(”password”);
if (petDAO.isValidUser(username, password)){
return mapping.findForward(”indexForward”); //成功则返回index，在xml中配置
}else{
return mapping.getInputForward(); //失败则返回本页面，xml配置
}
}
自建的验证js文件：
$(document).ready(function() {
$(”#ajaxsubmit”).click(function() {
login();
return false;
});
});
function login() {
var user = $(”#username”).val();
var pass = $(”#password”).val();
if (user == “”) {
$(”#message”).text(”请输入用户名”);
$(”#username”).focus();
return false;
}
if (pass == “”) {
$(”#message”).text(”请输入密码”);
$(”#password”).focus();
return false;
}
$.ajax({
url : “login.do”,
type : “post”,
dataType : “html”,
data : “username=” + user + “&password=” + pass,
beforeSend : function() {
$(”#message”).html(”登录中，请稍后…”).fadeIn(100);
},
success : function(data) {
$(”#form”).html(data); //这里是关键，上面action返回的是页面，所以这里用form
},
complete : function() {
$(”#message”).fadeOut(”200″);
}
}
);
}
最后执行效果，令人满意。即拥有了ajax异步效果，又不妨碍struts的mvc功能。这里是最基本的应用，更多的功能可以在此基础上扩展。
jquery真是个好东西啊。难怪google,baidu等大门户网站都在用。