近期学习了SSH2(Struts2 Spring Hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证)。

于是,我开始在网上搜索解决的办法,有些说通过一个隐藏的iframe来达到效果,当我总觉得麻烦和不实用。后来问了下老师,告诉了我使用ajax可以达到想要的效果,我又发现网上有很多例子都是ajax的,但缺少的就是SSH2(整合好的)和ajax 的整合(ajax使用了jQuery框架)。

说说我想要的效果:

登录页面点击提交后 进行后台的验证;

验证成功跳转到index.Jsp;

验证失败则在本登录页面执行一个jQuery脚本提示用户;

需要的包:

SSH2使用到的包外,还需要struts2的以下包:

commons-beanutils-1.8.0.jar
commons-collections-3.1.jar
commons-fileupload-1.3.1.jar
commons-io-2.2.jar
commons-lang-2.4.jar
commons-lang3-3.1.jar
commons-logging-1.1.3.jar
ezmorph-1.0.6.jar
freemarker-2.3.19.jar
json-lib-2.3-jdk15.jar
ognl-3.0.6.jar
struts2-core-2.3.16.3.jar
struts2-json-plugin-2.3.16.3.jar
xwork-core-2.3.16.3.jar

好了,开始贴代码:

login.jsp

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>会员登陆</title>
<!-- 必须添加jQuery 否则ajax将不启用。-->
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$("#button").click (function(){
varuser =$("#User").val();
varpassWord =$("#PassWord").val();
   $.ajax({ 
        //这里的需要Struts.xml的<action/>的name属性一致。
       url:‘login.action‘,
       //提交类型
       type:‘POST‘, 
       //提交数据给Action传入数据 
       data:{‘User‘:user,‘PassWord‘:passWord}, 
       //返回的数据类型
       dataType:‘json‘, 
       //成功是调用的方法
       success:function(data){ 
       //获取Action返回的数据用  data.Action中的属性名 获取
          if(data.result=="false")
          {
           alert("账号密码错误");
          }elseif(data.result=="true"){
           //进行页面跳转,因为ajax我们的Action只返回数据,不在进行跳转了...
          location.href = "index.jsp";
          }
          }  
     });
  });
  });
</script>
 </head>
 <body>

  账号:<input id="User" name="User"type="text" /><br/>

  密码:<input id="PassWord" name="PassWord"type="password"  /><br/>

 <input id="button" type="button"value="提交" />
 </body>
</html>

LoginAction.java

publicclass LoginAction extends ActionSupport {
  //使用@Resource注解注入条件属性名与 ref要一致才可
  @Resource
  FUserService fUserServiceImp;
  @Resource
  FUser fUser;
  private String User;
  private String PassWord;
  private String result;
  public String getResult() {
    returnresult;
  }
  publicvoid setUser (String User) {
    this.User = User;
  }
  publicvoid setPassWord(String PassWord) {
    this.PassWord = PassWord;
  }
  public String execute() throws Exception {
    HttpServletRequest request = ServletActionContext.getRequest();
    //获取ajax传过来的数据直接使用前台的属性名即可获取。
    fUser.setUserEmail(User);
    fUser.setUserPassWord(PassWord);
    if(fUserServiceImp.CheckUser(fUser)!=null){
      //返回给ajax的数据
      this.result = "true";
    }else{
      this.result = "false";
    }
    return"success";
  }
}

Struts.xml

<?xml version="1.0"encoding="UTF-8"?>
<struts>
  <!—这是我们配置SSH时配置Struts的package -->
  <package name="Struts" extends="struts-default">
    <action name="login"class="loginAction">
    </action>
  </package>
  <!—为了让ajax可以调用Spring中的Action 配置ajax的package -->
  <package name="ajax_json" extends="json-default">
  <!—本处的id就是ajax url的值,class引用了Spring 配置Action的id-->
    <action name="login" class="loginAction">
      <result name="success" type="json"/>
    </action>     
  </package>
</struts>

其他SSH2框架整合的不需要改动这样就可以将jQuery框架的ajax整合入SSH2框架使用了!

以上内容是个人所想,如有不对的地方欢迎给我留言,我会在第一时间和大家取得联系,谢谢大家一直以来对Devmax网站的支持。

SSH+Jquery+Ajax框架整合的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. osx – 无法创建目录/ var / teamsserver

    OpenSSH_6.2p2,OSSLShim0.9.8r8Dec2011debug1:Readingconfigurationdata/etc/ssh_configdebug1:/etc/ssh_configline20:Applyingoptionsfor*debug1:Connectingto1.2.3.4[1.2.3.4]portPORT.debug1:Connectionestablished.Couldnotcreatedirectory‘/var/teamsserver/.ssh’.debug

  3. ios – Xcode Server 4.0 git从构建触发脚本推送

    我为一个托管在github上的项目安装了一个XcodeBot.我按照步骤和设置机器人来使用我现有的SSH密钥.验证成功,项目结算和建立.然后,我在预触发器操作中添加了一个shell脚本,它增加了plist中的版本,将其标记,并将该更改提交到github.但是当我尝试从shell脚本执行gitpush时,我得到:–推送到git@github.com:spex-app/spex-ios.git权限被拒

  4. ios – Xcode上传错误:无法打开ssh会话. (16)

    注意:我们终于上传了该应用程序,但是我们并没有真正解决这个问题,所以如果有人可以分享一些有关这个问题的宝贵意见或经验,我将不胜感激.我也检查了以下2个类似的问题,但这些没有帮助:>Erroruploadingiosapplicationtoitunesconnect“failedtoopensshsession(16)”>AppStoresubmission/distributionerror“f

  5. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  6. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  7. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  8. swift详解之二十--------在xcode中使用git管理源代码,将代码提交到github

    在xcode中使用git管理源代码,将代码提交到github本文记录一下如何在Xcode中使用Git作为源代码控制工具,以及如何将本地的Git仓库和远程Github上的仓库集成起来,虽然这章节和swift没有关系,但我还是放在这里。对详细的git操作可以看在Xcode中使用Git进行源码控制讲得很详细,很好。将xcode与github链接起来。

  9. 使用OSC生成SSH

    在很多项目开始前,大家可能都愿意把项目或者自己封装的代码放到github上,但是有一点蛋疼的就是如果要在github上新建私有的项目是要收费的,所以我选择了OSC,这个不仅可以吧github的项目转接到OSC上,而且OSC还可新建私有的项目。好了,牛逼不吹了,开始下面部署SSH的步骤。第一步访问git.oschina.net,注册自己的账号第二步访问如下界面第三步打开终端第四步查看公钥第五步第六步如果你看到了这个WelcometoGit@OSC,yourname!标识,就说明成功了。

  10. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部