JQuery+Strusts1.x无刷新登录

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

 

      所用的JS插件： JQuery1.3.2汉化版、JQuery.form2.43   

 

      下面我们先来看看页面中核心的JS代码：    

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的代码：

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的配置文件：

# <action-mappings> # <action # input="/webstage/adminLogin.jsp" # name="AdminLoginForm" # path="/AdminLogin" # scope="request" # type="com.elkan.struts.actions.AdminLogin" # validate="false"/> # </action-mappings>

 

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

 

 

 

 

 

      看到上面的效果，你是不是也想展示一下自己的身手呢，那就赶紧动手吧，相信有了上面的那些代码的提示做个DEMO应该不会很难吧，如果有什么问题的话可以留言给我。谢谢支持。