本文提供了一系列 AJAX 和 Struts2 的实际应用案例，包括远程链接、自动补全、绑定、日期时间选择等技术的使用方法及示例代码。
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
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/>5、sx:div
通过事件将触发DIV中的操作，使DIV的状态发生变化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>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><!--notifyTopics：指定系列事件主题名，多个主题之间以英文逗号(,)隔开。配置该元素的HTML元素将会把事件发布到指定主题，发布主题时会传递3个参数：data, type, request。这3个参数代表了与服务器交互的内容，含义如下：
data：从服务器返回的数据。
type：与服务器交互的状态，只有3个值:before(交互之前) load(加载数据中) error(服务器响应出错)
request：代表请求对象本身。
因此，Struts2中的事件处理函数大致上都是如下形式的：
function(data, type, e) { ... ... }
-->
扫一扫
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
