dwr簡介--一個例子(續二)
系統
1943 0
頁面部分有幾個重要的文件：
login.jsp -- 登陸畫面
showtable.jsp -- 顯示table的畫面
showtable.js -- 顯示table頁用到的javascript
下面是login.jsp
<
body
>
<!--
?
????下面是要用到了js，UserLogic.js是自己的，是有dwr根據你編寫的dwr.xml文件的內容生成的
????另外兩個是dwr自帶的。
?
-->
<
script?
type
='text/javascript'?
src
='dwr/interface/UserLogic.js'></script>
<script?type
='text/javascript'?
src
='dwr/engine.js'></script>
<script?type
='text/javascript'?
src
='dwr/util.js'></script>
<script?type
='text/javascript'>
function?init()?{
??????DWRUtil.useLoadingMessage();
}
<!--?
????在按鈕提交時調用這個方法。注意這里的username,password,loginBean在這個jsp頁面中
????是沒有顯示的寫出來的。這三個東西是Username輸入框，Password輸入框和Form。
????他們的名字是Struts自己生成的，所以你必須知道struts生成html的命名規則
?--
>
function
?sumbit(){
????
return
?UserLogic.validate(show,$(
"
username
"
).value,$(
"
password
"
).value);
}
function
?show(flag){
????
if
(flag
==
false
){
?????????alert(
"
Invalid?Username?and?Password!
"
);
????}?
else
?{
????????$(
"
loginBean
"
).submit();
????}
}
</
script
>
<
html:form?
action
="/login"
>
????
<
table?
border
="0"
?width
="100%"
?id
="table1"
?cellspacing
="0"
?cellpadding
="0"
>
????????
<
tr
>
????????????
<
td?
align
="right"
>
Username:
</
td
>
????????????
<
td
><
html:text??
property
="username"
?size
="30"
/></
td
>
????????
</
tr
>
????????
<
tr
>
????????????
<
td?
align
="right"
>
Password:
</
td
>
????????????
<
td
><
html:password?
property
="password"
?value
="password"
?size
="30"
/></
td
>
????????
</
tr
>
????
</
table
>
????
<
div?
align
="center"
>
????????
<
input?
type
="button"
?value
="Submit"
?name
="button1"
?onclick
="sumbit()"
>
????
</
div
>
</
html:form
>
</
body
>
下面是showtable.jsp
<
body?
onload
="init()"
>
<
script?
type
='text/javascript'?
src
='dwr/interface/TableModel.js'></script>
<script?type
='text/javascript'?
src
='dwr/engine.js'></script>
<script?type
='text/javascript'?
src
='dwr/util.js'></script>
<script?type
='text/javascript'?
src
='showtable.js'></script>
<script?type
='text/javascript'?
src
='mm_script.js'></script>
<script?type
='text/javascript'?
src
='wz_tooltip.js'></script>
<!--這是顯示表格的層--
>
<
div?align
=
"
center
"
?id
=
"
base
"
?class
=
"
base
"
>
<
table?width
=
"
80%
"
?cellspacing
=
"
0
"
?cellpadding
=
"
0
"
?border
=
"
1
"
????bordercolor
=
"
#6699FF
"
?class
=
"
body
"
>
????
<
tr
>
????????
<
th?class
=
"
header1
"
><
a?href
=
"
#
"
?onclick
=
"
sort(0)
"
?
>
?column1?
</
a
><
span?id
=
"
arrow0
"
?class
=
"
arrow
"
></
span
></
th
>
????????
<
th?class
=
"
header1
"
><
a?href
=
"
#
"
?onclick
=
"
sort(1)
"
?
>
?column2?
</
a
><
span?id
=
"
arrow1
"
?class
=
"
arrow
"
></
span
></
th
>
????????
<
th?class
=
"
header1
"
><
a?href
=
"
#
"
?onclick
=
"
sort(2)
"
?
>
?column3?
</
a
><
span?id
=
"
arrow2
"
?class
=
"
arrow
"
></
span
></
th
>
????????
<
th?class
=
"
header1
"
>
Operation
</
th
>
????
</
tr
>
????
<
tbody?id
=
"
rows
"
>
????
<
logic:iterate?id
=
"
row
"
?name
=
"
tableRows
"
>
????????
<
tr
>
????????????
<
td
><
p?align
=
"
center
"
><
bean:write?name
=
"
row
"
?property
=
"
col1Value
"
?
/></
td
>
????????????
<
td
><
p?align
=
"
center
"
><
bean:write?name
=
"
row
"
?property
=
"
col2Value
"
?
/></
td
>
????????????
<
td
><
p?align
=
"
center
"
><
bean:write?name
=
"
row
"
?property
=
"
col3Value
"
?
/></
td
>
????????????
<
td
><
p?align
=
"
center
"
>
????????????????
<
a?href
=
"
#
"
?onclick
=
"
showUpdateLayer(<bean:write?name=
"
row
"
?property=
"
col1Value
"
?/>)
"
>
????????????????????
<
img?src
=
"
edit.gif
"
?border
=
"
0
"
/>
????????????????
</
a
>
????????????????
|
????????????????
<
a?href
=
"
#
"
?onclick
=
"
deleteRow(<bean:write?name=
"
row
"
?property=
"
col1Value
"
?/>)
"
>
????????????????????
<
img?src
=
"
remove.gif
"
?border
=
"
0
"
/>
????????????????
</
a
>
????????????
</
td
>
????????
</
tr
>
????
</
logic:iterate
>
????
</
tbody
>
</
table
>
<
table
>
????
<
tr
>
????????
<
td?id
=
"
addbutton
"
>
????????????
<
a?href
=
"
#
"
?onclick
=
"
showAddLayer()
"
><
img?src
=
"
add.gif
"
?border
=
"
0
"
?
/></
a
>
????????
</
td
>
????????
<
td?id
=
"
pager
"
>
????????
<!--
這是分頁
-->
????????????
<
table
>
????????????????
<
tr
>
????????????????????
<
td
>
[
</
td
>
????????????????????
<
logic:iterate?id
=
"
pager
"
?name
=
"
pagers
"
>
????????????????????????
<
td
><
a?href
=
"
#
"
?onclick
=
"
changePage(<bean:write?name=
"
pager
"
?/>)
"
><
bean:write?name
=
"
pager
"
?
/></
a
></
td
>
????????????????????
</
logic:iterate
>
????????????????????
<
td
>
]
</
td
>
????????????????
</
tr
>
????????????
</
table
>
????????
</
td
>
????
</
tr
>
</
table
>
</
div
>
<!--
這是顯示更改記錄的對話框的層
-->
<
div?align
=
"
center
"
?id
=
"
dialog
"
?class
=
"
dialog
"
>
????
<
form?name
=
"
addForm
"
>
????????
<
table?border
=
"
0
"
?width
=
"
100%
"
?height
=
"
100%
"
?cellspacing
=
"
0
"
?cellpadding
=
"
0
"
>
????????????
<
tr
>
????????????????
<
td?align
=
"
right
"
?height
=
"
25
"
?background
=
"
header.gif
"
?colspan
=
"
2
"
>
????????????????????
<
img?border
=
"
0
"
?src
=
"
close.gif
"
?width
=
"
14
"
?height
=
"
15
"
?onmouseover
=
"
this.src='close_over.gif'
"
?onmouseout
=
"
this.src='close.gif'
"
?onclick
=
"
showBase()
"
?
????????????????????onMouseDown
=
"
MM_dragLayer('dialog','',0,0,0,0,true,false,-1,-1,-1,-1,545,105,100,'',false,'')
"
>
????????????????
</
td
>
????????????
</
tr
>
????????????
<
tr
>
????????????????
<
td?align
=
"
right
"
?width
=
"
70
"
>
PK:
</
td
>
????????????????
<
td
><
span?id
=
"
col1Value
"
?class
=
"
pk
"
></
span
></
td
>
????????????
</
tr
>
????????????
<
tr
>
????????????????
<
td?align
=
"
right
"
>
Col2:
</
td
>
????????????????
<
td
><
input?type
=
"
text
"
?name
=
"
col2Value
"
?size
=
"
20
"
?class
=
"
text
"
></
td
>
????????????
</
tr
>
????????????
<
tr
>
????????????????
<
td?align
=
"
right
"
>
Col3:
</
td
>
????????????????
<
td
><
input?type
=
"
text
"
?name
=
"
col3Value
"
?size
=
"
20
"
?class
=
"
text
"
></
td
>
????????????
</
tr
>
????????????
<
tr
>
????????????????
<
td?colspan
=
"
2
"
?align
=
"
center
"
>
????????????????????
<
input?type
=
"
button
"
?value
=
"
save
"
?name
=
"
addButton
"
?class
=
"
button
"
?onclick
=
"
saveRow()
"
>
????????????????????
<
input?type
=
"
button
"
?class
=
"
button
"
?value
=
"
cancel
"
?name
=
"
kickAddButton
"
?onclick
=
"
showBase()
"
>
????????????????
</
td
>
????????????
</
tr
>
????????
</
table
>
????
</
form
>
</
div
>
<!--
這是顯示等待loading的層
-->
<
div?id
=
"
loading
"
?class
=
"
loading
"
>
????
<
table?border
=
"
0
"
?width
=
"
100%
"
?height
=
"
100%
"
?cellspacing
=
"
0
"
?cellpadding
=
"
0
"
>
????????
<
tr
>
????????????
<
td?class
=
"
loading
"
>
Loading
</
td
>
????????
</
tr
>
????
</
table
>
</
div
>
</
body
>
我這里用了另外兩個js庫，一個是mm_script.js：Macromedia的拖動層功能。另一個是wz_tooltip.js：toolTip庫。不過這兩個庫在我的程序中不起作用。我也不知道怎么回事。
至于showtable.js。太長了，不貼在這里了。在原程序中有的。我也寫了不少注釋。
對了別忘了下載源程序。為了減少體積，我把Struts的jar都拿走了，這個東西大家一般都有。現在里面都dwr和jdts的jar包。所以你要想運行的話需要把struts的jar包放到WEB-INF\lib下。
ant和db的東西也都有。需要在ModelOneDAO.java中把jdbc的url，user ，password改一下。
我這個程序還有一些bug，但是現在我沒有時間改了。大家將就一下吧。
http://www.blogjava.net/Files/mstar/StrutsAjax-min.rar
dwr簡介--一個例子(續二)
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元