天天看點

struts 與 jquery 整合

1、首先導入幾個jar包 

        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、伺服器端處理程式 

struts 與 jquery 整合

1/**//* 

 2 * Generated by MyEclipse Struts 

 3 * Template path: templates/java/JavaClass.vtl 

 4 */  

 5package com.sailor.test.action;  

 6  

 7import java.io.IOException;  

 8import java.io.PrintWriter;  

 9import java.util.ArrayList;  

10import java.util.List;  

11  

12import javax.servlet.http.HttpServletRequest;  

13import javax.servlet.http.HttpServletResponse;  

14  

15  

16import net.sf.json.JSONArray;  

17  

18import org.apache.struts.action.Action;  

19import org.apache.struts.action.ActionForm;  

20import org.apache.struts.action.ActionForward;  

21import org.apache.struts.action.ActionMapping;  

22  

23import com.sailor.test.action.form.LoginForm;  

24import com.sailor.test.model.LoginDTO;  

25  

26/** *//**  

27 * MyEclipse Struts 

28 * Creation date: 12-28-2008 

29 *  

30 * XDoclet definition: 

31 * @struts.action path="/login" name="loginForm" input="/login.jsp" scope="request" validate="true" 

32 */  

33public class LoginAction extends Action {  

34    /**//* 

35     * Generated Methods 

36     */  

37  

38    /** *//**  

39     * Method execute 

40     * @param mapping 

41     * @param form 

42     * @param request 

43     * @param response 

44     * @return ActionForward 

45     */  

46    public ActionForward execute(ActionMapping mapping, ActionForm form,  

47            HttpServletRequest request, HttpServletResponse response) {  

48          

49          

50        System.out.println("begin");  

51  

52        LoginForm loginForm = (LoginForm) form;  

53          

54        List<LoginDTO> list = new ArrayList<LoginDTO>();  

55          

56        LoginDTO l1 = new LoginDTO();  

57        l1.setUsername("haiou");  

58        l1.setPassword("sa");  

59          

60        LoginDTO l2 = new LoginDTO();  

61        l2.setUsername("sailor");  

62        l2.setPassword("123456");  

63          

64        LoginDTO l3 = new LoginDTO();  

65        l3.setUsername(loginForm.getUsername());  

66        l3.setPassword(loginForm.getPassword());  

67  

68        list.add(l1);  

69        list.add(l2);  

70        list.add(l3);  

71          

72        //适用于List  

73        //Map<String, Object> map = new HashMap<String, Object>();  

74        //map.put("userlist", list);  

75        //JSONObject json = JSONObject.fromObject(map);  

76          

77        //适用于Map  

78        JSONArray json = JSONArray.fromObject(list);  

79          

80        try {  

81            PrintWriter out = response.getWriter();  

82            out.print(json);  

83              

84        } catch (IOException e) {  

85            e.printStackTrace();  

86        }  

87  

88        return null;  

89    }  

90}  

2、struts-config,web.xml不需要特殊的配置 

3、login.jsp:輸入使用者名和密碼,然後顯示在本頁面 

struts 與 jquery 整合

<%@ page language="java" pageEncoding="UTF-8"%>  

 2<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>   

 3<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>  

 4   

 5<html>   

 6    <head>  

 7        <title>JSP for LoginForm form</title>  

 8  

 9          <script src="jquery-1[1].2.1.pack.js" charset="utf-8"></script>  

10    <script>  

11    $(document).ready(function(){  

12      

13      $("#userlogin").click(function(){  

14            $.ajax({  

15                 url:'login.do',   

16                 type: 'post',  

17                 data:'username='+$("#username").val()+'&password='+$("#password").val(),   

18                 timeout: 2000,  

19                 error: function(){  

20                    alert('錯誤');  

21                 },  

22                success: function(json){  

23                  

24                var users = eval('(' + json + ')');  

25                  

26                $("#result").empty();  

27                $("#username").attr("value","");   

28                $("#password").attr("value","");   

29                  

30                //傳回的是List  

31               $.each(users,function(i, user){         

32                  $("#result").append("<li>"+ i + " name: " + user.username + "  pwd:"+ user.password +"</li>");  

33               });  

34                 

35               //傳回的是Map類型  

36               //  var users = myObject.userlist;  

37               // $.each(users,function(i, user){  

38               //    $("#result").append("<li>"+ i + " name: " + user.username + "  pwd:"+ user.password +"</li>");  

39               // });  

40                 }  

41         });  

42          

43     });        

44     

45        //ajax送出  

46        $("#loading").ajaxStart(function(){   

47             $(this).html("<img src=\"loading.gif\"> 正在加載");  

48          });   

49        

50       //ajax成功狀态  

51        $("#loading").ajaxSuccess(function(){  

52             $(this).html("儲存成功!");  

53         });  

54           

55        //ajax結束狀态  

56         $("#loading").ajaxStop(function(){  

57           $(this).hide();  

58         });   

59     

60    });  

61    </script>  

62  

63  

64    </head>  

65    <body>   

66    使用者名 : <input type="text" id="username" name="username"/><br/>  

67    密碼 :     <input type="password" id="password" name="password"/><br/>  

68            <font id="userlogin">登陸</font><span id="loading"></span>  

69  

70    <p id="result"></p>  

71    </body>  

72</html>