struts与jquery整合

本文介绍了一个使用Struts2框架结合jQuery实现的简单登录示例。该示例通过Ajax方式提交表单数据,并利用JSON进行数据交换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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、服务器端处理程序
    


 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:输入用户名和密码,然后显示在本页面
    


 1<%@ 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 + "&nbsp; 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 + "&nbsp; pwd:"+ user.password +"</li>");
39               // });
40                 }

41         }
);
42        
43     }
);      
44   
45        //ajax提交
46        $("#loading").ajaxStart(function()
47             $(this).html("<img src=/"loading.gif/">&nbsp;正在加载");
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    <id="result"></p>
71    </body>
72</html>
73
74

下载:/Files/sailor/strutsJQuery.rar

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值