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);

                }

  • 相关阅读:
    数据结构-树与二叉树-思维导图
    The last packet successfully received from the server was 2,272 milliseconds ago. The last packet sent successfully to the server was 2,258 milliseconds ago.
    idea连接mysql报错Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezone' property
    redis学习笔记
    AJAX校验注册用户名是否存在
    AJAX学习笔记
    JSON学习笔记
    JQuery基础知识学习笔记
    Filter、Listener学习笔记
    三层架构学习笔记
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6894852.html
Copyright © 2011-2022 走看看