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" name="passwd" 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>