zoukankan      html  css  js  c++  java
  • Struts2 整合jQuery实现Ajax功能(1)


    技术领域非常多东西流行,自然有流行的道理。这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。

    首先明白个概念:

    jQuery是什么:是使用javascript语言开发的,用于满足项眼下台各种操作须要的js程序文件。

    也就是说。jQuery基本上就是个js程序集,基础核心是jQuery.js文件

    l        当然依据不同的版本号详细的表现形式:

    jQuery.1.6.js或者jquery-1.5.1.js

    这个是版本的不同,详细有哪些差别,还没发现。

    l        还有这样的形式

    jquery-1.5.1.min.js(紧缩格式。取消回车,一行代码)

    l        依据应用需求的不同。jQuery

    1          引入jQuery

    项目中引入jQuery

    l        下载jQuery:http://docs.jquery.com/Downloading_jQuery

    l        加入核心文件:将核心的jQuery文件拷贝到项目中。

            <SCRIPT type="text/javascript"src="js/jquery/jquery-1.6.js"></script>

            <SCRIPTtype="text/javascript">

                functioncheckkey()

                {   

                                …………使用jQuery技术自己定义的代码…………

                }

            </SCRIPT>

    2          jQuery的Ajax

    jQuery的内容很庞杂,能够解决诸多方面的需求。主要包含:Ajax。页面效果,页面验证。

    作为J2ee项目,我主要关注了一下Ajax和页面验证。

    jQuery的Ajax非常easy,只使用核心文件jQuery.js就能够实现了。

    函数

    描写叙述

    jQuery.ajax()

    运行异步 HTTP (Ajax) 请求。

    jQuery.get()

    使用 HTTP GET 请求从server载入数据。

    jQuery.getJSON()

    使用 HTTP GET 请求从server载入 JSON 编码数据。

    jQuery.post()

    使用 HTTP POST 请求从server载入数据。

    有关Ajax的方法有非常多,这里仅仅简单研究了三种(事实上就一种jQuery.ajax()),其他的都是jQuery.ajax()的简写形式。

    详细格式,上述站点说的已经很清楚了,记住例如以下格式就能够。

    $.ajax({

      type: 'POST',         //提交方法

      url: url,                            //提交的地址

      data: data,                 //提交的參数

      success: success,         //成功后,回调的函数名

      dataType: dataType     //返回的数据类型

    });

    演示样例:

    post的演示样例:使用ajax()的简化格式post()方法:中间有三个參数:url,data(json格式)。回调函数(回调函数能够定义在他处。此处仅写函数名

    $.post("test.jsp",

    {name: "John", time: "2pm" },

         function(data){

              alert("DataLoaded: " + data);

       });

     

    3          Struts2整合jQuery

    Struts2中基本的业务操作都是通过Action来完毕的。此时就须要jQuery来訪问Struts2的Action。

    $.post("Action",……)

    3.1         Login.jsp页面:

    l        功能:用户登录。首先须要输入公司标识码:

    l        正确:显示对勾;

    l        错误:显示红叉;

    l        jQuery代码:

            <SCRIPTtype="text/javascript" src="js/jquery/jquery-1.6.js"></script>

            <SCRIPTtype="text/javascript">

                function checkkey(){   

                    var url = 'getKeyExist';

                    var params ={companyKey:$('#ckey').attr('value')};

                     $('#warn').html("<imgsrc='image/ajax/wait.gif'/>");

                    jQuery.post(url, params,callbackFun);

                }

                function callbackFun(data){

                    $('#warn').html(data);

                }

            </SCRIPT>

    l        HTML:当文本框失去焦点时,触发回调事件。

    <DIV class=line><LABEL class=big id=lblName>公司标识</LABEL>

    <INPUT id='ckey' name="ckey" onblur="checkkey();"><spanid="warn"></span>

     </DIV>

    l        说明:

    n        当文本框‘ckey’失去焦点时:调用“checkkey”函数。

    n        “checkkey”函数分别确定两个信息:

    u      异步訪问:'getKeyExist'——推断标识是否正确的Action类。

    u      參数:{companyKey:$('#ckey').attr('value')}一个以json格式拼写的參数。

    u      注:Json的对象格式:

     


    u      发出异步请求:jQuery.post(url, params, callbackFun);

    3.2         Action代码:

    传统的Action都是返回String,依据String的不同决定forward到不同的Jsp页面,这给Ajax带来麻烦。我当初还是走了些弯路。

    3.2.1   通过Jsp得到回调信息

    繁琐。意义不打, 删去/略 !

    3.2.2   Action自主完毕响应(自己完毕结果对象的Json串行化,然后写入HttpServletResponse )

    后来发现,Action也能够自主完毕响应,不须要Jsp的支持。

    代码改动例如以下:

    l        Action:新建了个方法getKeyExist。不提供返回值。

                  if(complist.size()>0)

                         remessage="<imgsrc=’image/ajax/yes.gif’/> ";

                  else

                         remessage="<imgsrc=’image/ajax/no.gif’ /> ";                

                  HttpServletResponseresponse = ServletActionContext.getResponse();

           response.setCharacterEncoding("UTF-8");     

           response.getWriter().write(remessage);    

    l        struts.xml:又一次建立了无结果result;

           <actionname="getKeyExist" class="ResponseMessageAction"method="getKeyExist">

           </action>

    l        此时得到的响应就简单干净了非常多。

    上述方法已经能够得到响应的信息,可是在非常多情况下,还须要对响应的结果进行区分,来决定不同的显示效果,此时,响应值就要携带很多其它的信息。也就是说不是简单的一个字符串。而是一个对象。那么使用Json格式相对来说就比較方便(3.1提到了Json的对象格式)。

    l        Action:响应信息改为json格式。

                  if(complist.size()>0){

                         remessage="{type:'yes',show:'<imgsrc="image/ajax/yes.gif" />'}";

                  }

                  else{

                         remessage="{type:'no',show:'<imgsrc="image/ajax/no.gif" />'}";                                  }

    l        jQuery:回调结果

                function callbackFun(data){

                      eval('json=' + data +';'); //自己解析Json响应数据

                      if(json.type=='no'){

                             $('#ckey').focus();

                      }    

                    $('#warn').html(json.show);

                }

  • 相关阅读:
    HDU2897( 巴什博奕变形)
    HTML小知识点积累
    几种自己主动运行js代码的方式
    leetcode笔记:Contains Duplicate
    【Nutch基础教程之七】Nutch的2种执行模式:local及deploy
    为什么使用模板
    前端编程提高之旅(十)----表单验证插件与cookie插件
    【HDOJ 5399】Too Simple
    进程间通信之-信号signal--linux内核剖析(九)
    iOS类的合理设计,面向对象思想
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6894852.html
Copyright © 2011-2022 走看看