struts与jQuery的完美整合方式之一
plugin一定要是0.33的因为别的有错误和bug
commons-beanutils.jar
commons-collections.jar
commons-logging.jar
commons-lang.jar
ezmorph-1.0.6.jar
json-lib-2.2.3-jdk.jar
2、服务器端处理程序
package com.sailor.test.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.sailor.test.action.form.LoginForm;
import com.sailor.test.model.LoginDTO;
/** *//**
* MyEclipse Struts
* Creation date: 12-28-2008
*
* XDoclet definition:
* @struts.action path="/login" name="loginForm" input="/login.jsp" scope="request" validate="true"
*/
public class LoginAction extends Action {
/**//*
* Generated Methods
*/
/** *//**
* Method execute
* @param mapping
* @param form
* @param request
* @param response
* @return ActionForward
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
System.out.println("begin");
LoginForm loginForm = (LoginForm) form;
List<LoginDTO> list = new ArrayList<LoginDTO>();
LoginDTO l1 = new LoginDTO();
l1.setUsername("haiou");
l1.setPassword("sa");
LoginDTO l2 = new LoginDTO();
l2.setUsername("sailor");
l2.setPassword("123456");
LoginDTO l3 = new LoginDTO();
l3.setUsername(loginForm.getUsername());
l3.setPassword(loginForm.getPassword());
list.add(l1);
list.add(l2);
list.add(l3);
//适用于List
//Map<String, Object> map = new HashMap<String, Object>();
//map.put("userlist", list);
//JSONObject json = JSONObject.fromObject(map);
//适用于Map
JSONArray json = JSONArray.fromObject(list);
try {
PrintWriter out = response.getWriter();
out.print(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
2、struts-config，web.xml不需要特殊的配置
3、login.jsp：输入用户名和密码，然后显示在本页面
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
<title>JSP for LoginForm form</title>
<script src="jquery-1[1].2.1.pack.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#userlogin").click(function(){
$.ajax({
url:'login.do',
type: 'post',
data:'username='+$("#username").val()+'&password='+$("#password").val(),
timeout: 2000,
error: function(){
alert('错误');
},
success: function(json){
var users = eval('(' + json + ')');
$("#result").empty();
$("#username").attr("value","");
$("#password").attr("value","");
//返回的是List
$.each(users,function(i, user){
$("#result").append("<li>"+ i + " name: " + user.username + " pwd:"+ user.password +"</li>");
});
//返回的是Map类型
// var users = myObject.userlist;
// $.each(users,function(i, user){
// $("#result").append("<li>"+ i + " name: " + user.username + " pwd:"+ user.password +"</li>");
// });
}
});
});
//ajax提交
$("#loading").ajaxStart(function(){
$(this).html("<img src=\"loading.gif\"> 正在加载
");
});
//ajax成功状态
$("#loading").ajaxSuccess(function(){
$(this).html("保存成功!");
});
//ajax结束状态
$("#loading").ajaxStop(function(){
$(this).hide();
});
});
</script>
</head>
<body>
用户名 : <input type="text" id="username" name="username"/><br/>
密码 : <input type="password" id="password" name="password"/><br/>
<font id="userlogin">登陆</font><span id="loading"></span>
<p id="result"></p>
</body>
</html>
<form action="FuserAction.do?method=login" method="post" id="loginf">
<input type="text" name="mail" class="f_txt"/>
<input type="text" name="passwd" class="f_txt"/>
<input type="button" onclick="javascript:checkf();" class="f_but" value="登 录"/>
</form>
<script language="javascript">
function checkf(){
var form=$("#loginf");
var url = form.attr('action');
/* var params = {
mail:encodeURI(form.attr('content').value), //这个可能是适合中文的
passwd:form.attr('uid').value
};*/
var params = {
mail:form.attr("mail").value,
passwd:form.attr("passwd").value
};
readyFn = function(data){
alert(data);
alert(data.message);
};
jQuery.post(url, params, readyFn, 'json');
$(function(){alert();});
}
</script>