使用Struts實現Ajax效果

fmms 12年前發布 | 24K 次閱讀 Struts Android開發 移動開發

首先說,Struts提供了對Ajax的支持。他們是建立在Dojo和DWR基礎之上的。其中,Dojo是開源的JavaScript工具

包。提供了豐富的組件庫和頁面效果.

想要在Struts2中使用這個支持,需要導入struts2-dojo-plugin-2.1.8.jar這個插件,他提供了支持。

配置完成后,在需使用的頁面導入標簽庫

<%@taglib uri="/struts-tags" prefix="s"%>
<%@taglib uri="/struts-dojo-tags" prefix="sx"%>
然后就可以使用了。下面我們來演示一個時間選擇器的案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@taglib uri="/struts-dojo-tags" prefix="sx"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'test2.jsp' starting page</title>
    <sx:head/>
  </head>

  <body>
  <br/>---------------------時間選擇器---------------------------<br/>
  <sx:datetimepicker value="today" name="getdate" label="時間選擇器" displayFormat="yyyy-MM-dd">
  </sx:datetimepicker>
   <br/>---------------------時間選擇器---------------------------<br/>


  </body>
</html>
效果如下:

可以看到效果非常的好,但是代碼非常的簡單,可見Dojo的威力強大.

然后再做一個樹形結構,這個在許多管理網站界面都能看見,很常用

<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@taglib uri="/struts-dojo-tags" prefix="sx"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'test3.jsp' starting page</title>
    <sx:head/>
  </head>

  <body>
  <sx:tree label="中國" id="1" showGrid="true" showRootGrid="true" treeSelectedTopic="treeSelected">

    <sx:treenode label="山東省" id="2">
        <sx:treenode label="濟南市" id="3"/>
        <sx:treenode label="青島市" id="4"/>
        <sx:treenode label="煙臺市" id="5"/>
        <sx:treenode label="棗莊市" id="6"/>
    </sx:treenode>

    <sx:treenode label="北京市" id="7">
        <sx:treenode label="東城區" id="8"/>
        <sx:treenode label="西城區" id="9"/>
    </sx:treenode>


    <sx:treenode label="上海市" id="10">
        <sx:treenode label="黃浦區" id="11"/>
        <sx:treenode label="徐匯區" id="12"/>
    </sx:treenode>

  </sx:tree>
  </body>
</html>

效果如下

<img src="https://simg.open-open.com/show/5f67d596666ad4cfc455c2ef13f801bf.jpg" alt="" />

 本文由用戶 fmms 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!