您的位置：首页 > 编程语言 > Java开发

struts2 标签初识 Ajax Tags 上

2010-08-02 16:59 603 查看

1、a

/ajax/remotelink/index.jsp

1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7:     <title>Ajax Examples</title>
8:     <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <script type="text/javascript">
12:    function handler(widget, node) {
13:      alert('I will handle this myself!');
14: 	 dojo.byId(widget.targetsArray[0]).innerHTML = "Done";
15:    }
16:
17:    dojo.event.topic.subscribe("/before", function(event, widget){
18:       alert('inside a topic event. before request');
19:       //event: set event.cancel = true, to cancel request
20:       //widget: widget that published the topic
21:    });
22:
23:    dojo.event.topic.subscribe("/after", function(data, request, widget){
24:       alert('inside a topic event. after request');
25:       //data : text returned from request
26:       //request: XMLHttpRequest object
27:       //widget: widget that published the topic
28:    });
29:
30:    dojo.event.topic.subscribe("/error", function(error, request, widget){
31:       alert('inside a topic event. on error');
32:       //error : error object (error.message has the error message)
33:       //request: XMLHttpRequest object
34:       //widget: widget that published the topic
35:    });
36:
37:    dojo.event.topic.subscribe("/topics", function(data, type, e){
38:       alert('inside a topic event. type='+type);
39:       //data : text returned
40:       //type : "before", "load", "error"
41:       //e    : request object
42:    });
43: </script>
44:
45: <body>
46:
47: <div id="t1">Div 1</div>
48:
49: <br/>
50:
51: <div id="t2">Div 2</div>
52:
53: <br/><br/>
54:
55: <s:url var="ajaxTest" value="/AjaxTest.action" />
56: <s:url var="test3" value="/Test3.action" />
57:
58: <sx:a
59:         href="%{#ajaxTest}"
60:         targets="t1"
61:         highlightColor="red"
62:         highlightDuration="2000">Update 'Div 1' and use red highligh to notify user of changed content</sx:a>
63:
64: <br/><br/>
65:
66: <sx:a   id="link1"
67:         href="%{#ajaxTest}"
68:         indicator="indicator"<!--显示请求时的元素ID-->
69: 		targets="t1,t2"
70:         beforeNotifyTopics="/before"<!--请求发送前执行-->
71:         afterNotifyTopics="/after" >Update 'Div 1' and 'Div 2', publish topic '/before' and '/after', use indicator</sx:a>72:

<!--请求以后执行（如果请求成功）-->

<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
73:
74: <br/><br/>
75:
76: <sx:a  id="link2"
77:         href="/AjaxNoUrl.jsp"
78: 		errorText="Error Loading"<!-- 如果执行时出错将显示这里的内容-->
79: 		targets="t1"<!--更新元素的ID-->
80:         errorNotifyTopics="/error">Try to update 'Div 1', publish '/error', use custom error message</sx:a>
81: <!--请求后执行（如果请求失败）-->
82: <br/><br/>
83:
84: <sx:a  id="link3"
85:         href="%{#ajaxTest}"
86: 		loadingText="Loading!!!"<!--刷新时显示的内容-->
87:         showLoadingText="true"<!--跳转前是否传参数 false不传 true传-->
88: 		targets="t1">Update 'Div 1', use custom loading message</sx:a>
89:
90: <br/><br/>
91:
92: <sx:a  id="link4"
93:         href="%{#test3}"
94: 		executeScripts="true"<!--跳转前是否执行脚本代码 false不执行 true执行-->
95: 		targets="t2">Update 'Div 2' and execute returned javascript </sx:a>
96:
97: <br/><br/>
98:
99: <sx:a  id="link5"
100:         href="%{#ajaxTest}"
101: 		handler="handler"<!--执行javascrip脚本的函数-->
102: 		targets="t2">Update 'Div 2' using a custom handler </sx:a>
103:
104:
105: <br/><br/>
106:
107: <label for="textInput">Text to be echoed</label>
108:
109: <form id="form">
110:   <input type=textbox name="data">
111: </form>
112:
113: <br/><br/>
114:
115: <sx:a  id="link6"
116:         href="%{#ajaxTest}"
117: 		targets="t2"
118: 		formId="form"<!--显示id为这个的form的值-->
119: 		>Update 'Div 2' with the content of the textbox </sx:a>
120:
121:
122: <br/><br/>
123:
124: <s:include value="../footer.jsp"/>
125:
126: </body>
127: </html>

2、autocompleter

/ajax/autocompleter/index.jsp

1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4: <html>
5: <head>
6:     <title>Ajax Examples</title>
7:
8:     <!--// START SNIPPET: common-include-->
9:     <jsp:include page="/ajax/commonInclude.jsp"/>
10:     <!--// END SNIPPET: common-include-->
11: </head>
12:
13: <script type="text/javascript">
14:    dojo.event.topic.subscribe("/before", function(event, widget){
15:       alert('inside a topic event. before request');
16:       //event: set event.cancel = true, to cancel request
17:       //widget: widget that published the topic
18:    });
19:
20:    dojo.event.topic.subscribe("/after", function(data, request, widget){
21:       alert('inside a topic event. after request');
22:       //data : json object from request
23:       //request: XMLHttpRequest object
24:       //widget: widget that published the topic
25:    });
26:
27:    dojo.event.topic.subscribe("/value", function(error, request, widget){
28:       alert('inside a topic event. on error');
29:       //error : error object (error.message has the error message)
30:       //request: XMLHttpRequest object
31:       //widget: widget that published the topic
32:    });
33:
34:    function showKey() {
35:       var autoCompleter = dojo.widget.byId('jsauto');
36:       alert(autoCompleter.getSelectedKey());<!--搜索的主键-->
37:    }
38:
39:    function showValue() {
40:       var autoCompleter = dojo.widget.byId('jsauto');
41:       alert(autoCompleter.getSelectedValue());<!--搜索的最后的值-->
42:    }
43: </script>
44:
45: <body>
46:
47:
48: <s:url var="jsonList" value="/JSONList.action"/><!--这个action指向一个JSONList.js文件里面放的是一个城市列表-->
49:
50: Using a JSON list returned from an action (href="/JSONList.action"), without autoComplete (autoComplete="false"), use indicator, search substring (searchType="substring")
51: <br/>
52: <sx:autocompleter
53:     indicator="indicator1"
54:     href="%{jsonList}"
55:     cssStyle="width: 200px;" <!--用css元素修饰这个标签-->
56:     autoComplete="false" <!--是否在文本框中显示提示的结果-->
57:     searchType="substring"<!--定义查询的规则：'startstring'首字符串, 'startword'首字符 and 'substring'子字符串-->
58:     name="state"/><!--设置元素名称-->
59: <img id="indicator1" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
60:
61: <br/><br/>
62:
63: Reload on type (loadOnTextChange="true"), after 3 characters (loadMinimumCount="3", it is "3" by default), without the down arrow button (showDownArrow="false")
64: <br/>
65: <sx:autocompleter
66:     id="auto2"
67:     indicator="indicator"
68:     href="%{jsonList}"
69:     cssStyle="width: 200px;"
70:     autoComplete="false"
71:     loadOnTextChange="true"<!--每次输入时重新加载字符 true加载 false 不加载-->
72:     loadMinimumCount="3"<!--强制加载的最少字符-->
73:     showDownArrow="false"/><!--显示或者隐藏下箭头按钮 false隐藏 true 显示-->
74: <img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
75:
76: <br/><br/>
77:
78: Using a JSON list returned from an action (href="/JSONList.action"), with autoComplete (autoComplete="true")
79: <br/>
80: <sx:autocompleter
81:     name="auto3"
82:     href="%{#jsonList}"
83:     cssStyle="width: 200px;"
84:     autoComplete="true" />
85:
86: <br/><br/>
87:
88: Using a local list (list="%{'apple','banana','grape','pear'}")
89: <br/>
90: <sx:autocompleter list="{'apple','banana','grape','pear'}" cssStyle="width: 150px;"/>
91:
92: <br/><br/>
93:
94: Force valid options (forceValidOption="true")
95: <br/>
96: <sx:autocompleter
97:     name="auto4"
98:     href="%{#jsonList}"
99:     cssStyle="width: 200px;"
100:     forceValidOption="true"/><!--文本框只接受下拉区域的内容-->
101:
102: <br/>
103: <br/>
104:
105: Make dropdown's height to 180px  (dropdownHeight="180")
106: <br/>
107: <sx:autocompleter
108:     name="auto5"
109:     href="%{#jsonList}"
110:     cssStyle="width: 200px;"
111:     dropdownHeight="180"/><!--下拉框的高度-->
112:
113: <br/>
114: <br/>
115:
116: Disabled combobox (disabled="true")
117: <br/>
118: <sx:autocompleter
119:     name="auto6"
120:     href="%{#jsonList}"
121:     cssStyle="width: 200px;"
122:     disabled="true"/><!--启用或禁用autocompleter 标签-->
123:
124: <br/>
125: <br/>
126:
127:
128: <s:url var="autoex" action="AutocompleterExample" namespace="/nodecorate"/>
129: <!--执行一个action这个action实质上指向一个ftl文件-->
130: Link two autocompleter elements. When the selected value in 'Autocompleter 1' changes, the available values in 'Autocompleter 2' will change also.
131: <br/>
132: <form id="selectForm">
133:   <p>
134:     Autocompleter 1
135:     <sx:autocompleter
136:         name="select"
137:         list="{'fruits','colors'}"
138:         value="colors"
139:         valueNotifyTopics="/Changed"<!--当被选择时这个值将被发布出来-->
140:         forceValidOption="true"/>
141:   </p>
142: </form>
143: Autocompleter 2
144: <sx:autocompleter
145:      name="auto8"
146:      href="%{#autoex}"
147:      autoComplete="false"
148:      formId="selectForm"
149:      listenTopics="/Changed"<!--监听到触发信息时从新装入-->
150:      forceValidOption="true" />
151:
152: <br/><br/>
153:
154: Publish before/after/value notify topics
155: <br/>
156: <sx:autocompleter
157:     name="auto9"
158:     href="%{#jsonList}"
159:     listenTopics="/reload"
160:     beforeNotifyTopics="/before"
161:     afterNotifyTopics="/after"
162:     valueNotifyTopics="/value"
163:     cssStyle="width: 200px;" />
164: <s:submit theme="simple" value="Reload Values" onclick="dojo.event.topic.publish('/reload')"/>
165:
166: <br/><br/>
167:
168: Get values using JavaScript
169: <br/>
170: <sx:autocompleter  href="%{#jsonList}"  id="jsauto" name="state"/>
171: <s:submit theme="simple" value="Show Key" onclick="showKey()"/>
172: <s:submit theme="simple" value="Show Value" onclick="showValue()"/>
173:
174: <br/><br/>
175:
176: <s:include value="../footer.jsp"/>
177: </body>
178: </html>

http://hi.baidu.com/annleecn

3、bind

/ajax/bind/index.jsp[code]1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7:     <title>Bind Examples</title>
8:     <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <script type="text/javascript">
12:    dojo.event.topic.subscribe("/before", function(event, widget){
13:       alert('inside a topic event. before request');
14:       //event: set event.cancel = true, to cancel request
15:       //widget: widget that published the topic
16:    });
17:
18:    dojo.event.topic.subscribe("/after", function(data, request, widget){
19:       alert('inside a topic event. after request');
20:       //data : text returned from request
21:       //request: XMLHttpRequest object
22:       //widget: widget that published the topic
23:    });
24: </script>
25:
26: <body>
27:
28: <div id="div1">Div 1</div>
29: <s:url var="ajaxTest" value="/AjaxTest.action" />
30:
31:
32: <br/><br/>
33: <p>
34:     1. Attach to "onclick" event on button. Update content of Div 1. Use with indicator.
35:     <img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
36:     <sx:bind href="%{#ajaxTest}" sources="button" targets="div1" events="onclick" indicator="indicator" />
37:      <br/><!--sources定义了引发事件的对象-->
38:     <s:submit theme="simple" type="submit" value="submit" id="button"/>
39: </p>
40: <br/><br/>
41: <p>
42:     2. Attach to "onmouseover", and "onclick" event on Area below and update content of Div1, highlight targets with green color
43:     <sx:bind id="ex2" href="%{#ajaxTest}" sources="div2" targets="div1" events="onmouseover,onclick" highlightColor="green"/>
44:     <div id="div2" style="width: 300px; height: 50px; border: 1px solid black">
45:         Mouse Over or Click Here!
46:     </div>
47: </p>
48: <br/><br/>
49: <p>
50:     3. Attach to "onkeydown" event on Textbox below update content of Div1. Publish topics.
51:     <sx:bind id="ex4" href="%{#ajaxTest}" sources="txt1" targets="div1" events="onkeydown" beforeNotifyTopics="/before" afterNotifyTopics="/after" />
52:     <br/>
53:     <s:textfield id="txt1"/>
54: </p>
55:
56:
57: <br/><br/>
58: <s:include value="../footer.jsp"/>
59:
60: </body>
61: </html>

4、datetimepicker

<sx:datetimepicker id="picker" label="Order Date" />
<script type="text/javascript">
function setValue() {
var picker = dojo.widget.byId("picker");

//string value
picker.setValue('2007-01-01');

//Date value
picker.setValue(new Date());
}

function showValue() {
var picker = dojo.widget.byId("picker");

//string value
var stringValue = picker.getValue();
alert(stringValue);

//date value
var dateValue = picker.getDate();
alert(dateValue);
}
</script>

<sx:datetimepicker id="picker" label="Order Date" valueNotifyTopics="/value"/>

<script type="text/javascript">
dojo.event.topic.subscribe("/value", function(textEntered, date, widget){
alert('value changed');
//textEntered: String enetered in the textbox
//date: JavaScript Date object with the value selected
//widet: widget that published the topic
});
</script>
注意点：要加上<sx:head/>[/code]

5、sx:div

通过事件将触发DIV中的操作，使DIV的状态发生变化
[code]1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7:     <title>Ajax Examples</title>
8:     <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <script type="text/javascript">
12:    function handler(widget, node) {
13:      alert('I will handle this myself!');
14: 	 node.innerHTML = "Done";
15:    }
16: </script>
17:
18: <s:url var="ajaxTest" value="/AjaxTest.action" />
19:
20: <body>
21: <sx:div
22:         id="once"
23:         cssStyle="border: 1px solid yellow;"
24:         href="%{ajaxTest}"
25: 		handler="handler">
26:     Initial Content</sx:div>
27:
28: <s:include value="../footer.jsp"/>
29:
30: </body>
31: </html>

1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7: <title>Ajax Examples</title>
8: <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <body>
12:
13: <s:url var="ajaxTest" value="/AjaxTest.action" />
14:
15: <sx:div
16: id="fiveseconds"
17: cssStyle="border: 1px solid yellow;"
18: href="%{ajaxTest}"
19: delay="1000"
20: updateFreq="5000"
21: errorText="There was an error"
22: loadingText="reloading"
23: showLoadingText="true">loading now</sx:div>
24:
25: <s:include value="../footer.jsp"/>
26:
27: </body>
28: </html>
13: <s:url var="ajaxNoUrl" value="/AjaxNoUrl.jsp" />
14:
15: <sx:div
16: id="error"
17: cssStyle="border: 1px solid yellow;"
18: href="/AjaxNoUrl.jsp"
19: delay="1000"
20: errorText="Could not contact server"
21: loadingText="reloading">loading now</sx:div>[/code]

1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7:     <title>Ajax Examples</title>
8:     <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <body>
12:
13: <script>
14: 	var controller = {
15: 		refresh : function() {},
16: 		start : function() {},
17: 		stop : function() {}
18: 	};
19:
20: <!--将controller的refresh方法注册成/refresh主题的发布者-->
21: 	dojo.event.topic.registerPublisher("/refresh", controller, "refresh");
22: 	dojo.event.topic.registerPublisher("/startTimer", controller, "start");
23: 	dojo.event.topic.registerPublisher("/stopTimer", controller, "stop");
24:
25: </script>
26: <form id="form">
27: 	<label for="textInput">Text to be echoed</label>
28: 	<input type=textbox id="textInput" name="data">
29: </form>
30:
31: <br/><br/>
32:
33: <input type=button value="refresh" onclick="controller.refresh()">
34: <input type=button value="stop timer" onclick="controller.stop()">
35: <input type=button value="start timer" onclick="controller.start()">
36:
37: <s:url var="ajaxTest" value="/AjaxTest.action" />
38:
39: <sx:div
40:         id="once"
41:         cssStyle="border: 1px solid yellow;"
42:         href="%{ajaxTest}"
43:         loadingText="Loading..."
44: 		listenTopics="/refresh"<!--指定系列事件主题名，多个主题之间以英文逗号(,)隔开。配置该元素的HTML元素将用于加载服务器响应。-->
45: 		startTimerListenTopics="/startTimer"<!-- 该属性设置一个监听的事件主题，当有Struts2组件向该主题发布事件时，该div标签的计时器被启动。-->
46: 		stopTimerListenTopics="/stopTimer"<!-- 该属性设置一个监听的事件主题，当有Struts2组件向该主题发布事件时，该div标签的计时器被停用。-->
47: 		updateFreq="3000"
48: 		autoStart="true"<!--自动启动计时器-->
49:         highlightColor="red"
50: 		formId="form"
51: 		>
52:     Initial Content</sx:div>
53:
54: <s:include value="../footer.jsp"/>
55:
56: </body>
57: </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航