文档章节

JQuery+Strusts1.x无刷新登录

tojsp_com
 tojsp_com
发布于 2010/08/18 12:54
字数 748
阅读 982
收藏 3

在当今技术发展日益成熟,人们除了追求技术创新与发展外,更多也关注到了与用户交互的便利性方面上。当程序员还在为前后数据交互刷新问题困惑时,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,否则将追究法律责任,谢谢配合

© 著作权归作者所有

tojsp_com
粉丝 8
博文 14
码字总数 10888
作品 0
深圳
私信 提问
JWT生成token及过期处理方案

业务场景 在前后分离场景下,越来越多的项目使用token作为接口的安全机制,APP端或者WEB端(使用VUE、REACTJS等构建)使用token与后端接口交互,以达到安全的目的。本文结合stackover以及本身...

铲平王
2018/08/01
19.9K
1
API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更小一点,我设置...

等月人
2018/06/24
275
2
shiro 共享session问题

有2个子项目A和B,部署在不同的tomcat或jetty端口,计划之间是通过redis共享session,现在的问题是: A站登录后,的确在redis插入了一条session记录,登录等都成功,但是在B站刷新页面确定位...

odoo365
2016/11/13
2.3K
13
12306.CN 订票助手

这是一个用于辅助在12306.CN上订票的Chrome&Firefox脚本。 这是一个可以运行在遨游3、Chrome、猎豹或Firefox浏览器上的脚本扩展,可以帮助您在 12306.CN 购买火车票(或抢火车票?),反正就...

匿名
2013/01/16
9.4K
0
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(九)解决一下现存的问题

我们现在已经能够使用vuex来管理登录登出状态了,但用this.$store.dispatch('logout')的方式写在main.js里面却不能生效,其实这完全不是问题,是我太蠢了........ 事实上是这样的:store.js是...

思吾谓何思
2017/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB系列-在复制集(replication)以及分片(Shard)中创建索引

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在使用MongoDB时,在创建索引会涉及到在复制集(replication)以及分片(Shard)中创建,为了最大限度地减少构建索引的影响,在副本...

ccww_
25分钟前
17
0
SAP HANA数据库multi container模式JDBC链接connection refused

报错如下信息 com.sap.db.jdbc.exceptions.JDBCDriverException: SAP DBTech JDBC: Cannot connect to jdbc:sap://xxx.xxx.xxx.xxx:30015 [Cannot connect to host xxx.xxx.xxx.xxx:30015 [C......

flash胜龙
50分钟前
35
0
c++ 虚基类

c++ 虚基类 p556

天王盖地虎626
56分钟前
89
0
k8s删除Terminating状态的命名空间

背景: 我们都知道在k8s中namespace有两种常见的状态,即Active和Terminating状态,其中后者一般会比较少见,只有当对应的命名空间下还存在运行的资源,但是该命名空间被删除时才会出现所谓的...

Andy-xu
今天
83
0
seata源码阅读笔记

seata源码阅读笔记 本文没有seata的使用方法,怎么使用seata可以参考官方示例,详细的很。 本文基于v0.8.0版本,本文没贴代码。 seata中的三个重要部分: TC:事务协调器,维护全局事务和分支...

东都大狼狗
今天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部