JQuery+Strusts1.x无刷新登录

在当今技术发展日益成熟，人们除了追求技术创新与发展外，更多也关注到了与用户交互的便利性方面上。当程序员还在为前后数据交互刷新问题困惑时，AJAX问世了，它以方便快捷的优越性博得了广大程序员的追捧。经过几年的发展，它也渐渐成为我们开发中必不可少的一件利器，下面我就来讲个struts+ajax的登录示例。
      所用的JS插件： JQuery1.3.2汉化版、JQuery.form2.43
     下面我们先来看看页面中核心的JS代码：
 

JavaScript代码

1. function submitForm()   
2. {     
3.    // 用jquery.form插件实现对表单数据系列化   
4.     var form = $("form[name=AdminLoginForm]");   
5.    // 配置jquery.form中ajaxForm的参数   
6.     // success 操作成功时的回调函数   
7.     // resetForm 是否刷新表单   
8.     // dataType 接收服务器返回数据的类型, 有script, xml, json等   
9.     var options = {success:showResponse,resetForm:false,dataType:"script"};   
10.     // ajax发送表单数据到服务器   
11.      form.ajaxForm(options);                  
12.      return false;   
13. }   
14.                
15. //回调函数   
16. function showResponse(responseText,statusText){                
17.     if(statusText == "success")   
18.     {   
19.           alert(responseText);   
20.     }   
21.     else  
22.     {   
23.           alert("由于通讯问题，请稍后再登录！");   
24.     }   
25. }   

      在上面的代码中我们可以发现通过JQuery和JQuery.form两款插件，我们只要短短的三行代码就可以实现与后台的数据交互。JQuery是一款功能很强大的JS插件，我个人也很喜欢，调用很方便，代码风格也不错。有空可以研究一下哦，呵呵…… 

      下面继续来看看struts的action的代码：

Java代码

1. public ActionForward execute(ActionMapping mapping, ActionForm form,         
2.            HttpServletRequest request, HttpServletResponse response)         
3.            throws Exception {         
4.        // 输出的方式与编码格式         
5.        response.setContentType("text/html; charset=utf-8");         
6.        PrintWriter out = response.getWriter();         
7.        // 获取表单数据         
8.        AdminLoginForm adminLogin = (AdminLoginForm) form;         
9.        // 获取服务器产生的验证码         
10.       String validateCode = request.getSession().getAttribute("validateCode").toString();         
11.        try {         
12.            // 判断用户输入的验证码是否正确         
13.          if (adminLogin.getVerifycode().equalsIgnoreCase(validateCode)) {         
14.                // 用户名的状态         
15.                boolean isUser = false;         
16.                // 验证用户名是否存在         
17.               if(!adminLogin.getUsername().equalsIgnoreCase("elkan")){         
18.                       out.print("你输入的用户名不存在，请重新输入！");         
19.                       return null;         
20.                   }else{         
21.                       isUser = true;         
22.                   }         
23.                // 验证密码是否正解         
24.               if(adminLogin.getUserpswd().equalsIgnoreCase("lisenhui2010") && isUser){         
25.                    out.print("登录成功！");         
26.                }else{         
27.                    out.print("密码错误，请重新输入！");         
28.                    return null;         
29.                }         
30.            } else {         
31.                out.print("验证码输入错误请重新输入！");         
32.                return null;         
33.            }                    
34.         } catch (Exception e) {         
35.            out.print(e.toString());         
36.        }         
37.      return null;         
38. }      

       还有下面的struts-config.xml的配置文件：

XML/HTML代码

1. <action-mappings>     
2.    <action       
3.        input="/webstage/adminLogin.jsp"     
4.         name="AdminLoginForm"     
5.         path="/AdminLogin"     
6.         scope="request"     
7.         type="com.elkan.struts.actions.AdminLogin"     
8.         validate="false"/>     
9. </action-mappings>    

       说了那么多，下面先来看看通上面的代码所实现的效果吧：





       看到上面的效果，你是不是也想展示一下自己的身手呢，那就赶紧动手吧，相信有了上面的那些代码的提示做个DEMO应该不会很难吧，如果有什么问题的话可以留言给我。谢谢支持。
      
        预告：下一期将发布：strus2.x+JQuery完美结合

       本文为 leo原创JSP博客独家发布,转载请保留原文地址 http://www.dukai168.cn/blog/149.html,否则将追究法律责任,谢谢配合