JSP+Ajax 添加、刪除多選框
本例是采用JSP + Ajax + 文本來演示多選、全選,添加、刪除、更新checkbox多選框的效果。
本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞數據,利用JSP操作文本的效果。
1,JavaScript 用來控制頁面內容的現實與增刪效果;
2,JSP作為后臺,對文本進行讀取、寫入、更新等操作;
3,文本格式是用來存儲數據的,數據編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調試通過,同時兼容Firefox 1.0,Opera 8.0,IE6。
本例子的優(yōu)點:
1,實時創(chuàng)建html對象,所見即所得的頁面增刪操作。顯示速度加快,增加用戶體驗。
2,XML http傳遞數據是只是一個id或一個表單值,節(jié)省帶寬。
3,本例子適合采用XML http方式,所以這個效果實用性強,可是JS/JSP代碼都很簡單。
4,有很多東西可以在其他項目共用,并且解決了操作文本關于中文字符編碼的問題。 (本例子在中文操作系統(tǒng)運行,所以選擇了GBK編碼,如果OS是英文的則需要另外處理,比如改編碼為UTF-8,或者根據需要另外轉換編碼。)
5,有拖拽以及展開關閉的效果,用cookie記錄了位置以及打開關閉狀態(tài),可以在某個項目里用。
6,有豐富的注釋,適合初學者一起探討。
缺點:
1,維護調試麻煩,為了這個效果是否值得這樣做?如果采用普通的方式,嵌入一個iframe進來,會不會也可以。
2,代碼沒有更多地優(yōu)化、簡寫,有些地方冗余。
3,交互設計方面沒有好好地做,這里主要表示的是技術實現和交流。
源文件下載:checkbox.rar
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
由于時間有限,難免有很多問題,希望大家提出來。其實本例做的并不怎么好,拿出來希望眾位多多入指點,同時也希望對同樣是初學者的朋友來說有幫助,也希望大家一起交流進步,謝謝!:p
另外之前做的有關Ajax的東東,順便請供參考,謝謝!
PHP+Ajax 發(fā)帖程序實例: http://jiarry.blogchina.com/5555296.html
源碼下載: post_ajax.rar
JSP登錄證碼無刷新提示: http://jiarry.blogchina.com/5287654.html
源碼下載: imgValidate.rar
代碼沒有整理,優(yōu)化,所以本例子只供大家交流參考用,希望可以通過這種方式得到各位的幫助,謝謝!
經典論壇討論:
http://bbs.blueidea.com/viewthread.php?tid=2673442
- Js自定義多選框效果的實例代碼
- 用原生JS實現簡單的多選框功能
- AngularJS 單選框及多選框的雙向動態(tài)綁定
- html+javascript+bootstrap實現層級多選框全層全選和多選功能
- AngularJS單選框及多選框實現雙向動態(tài)綁定
- JavaScript判斷表單中多選框checkbox選中個數的方法
- JS 實現列表與多選框選擇附預覽動畫
- ExtJS 下拉多選框lovcombo
- ExtJS Grid使用SimpleStore、多選框的方法
- 用 Javascript 驗證表單(form)中多選框(checkbox)值
- javascript 單選框,多選框美化代碼
- 兼容ie和firefox版本的js反選 全選 多選框
- JS面向對象之多選框實現
相關文章
AJAX中同時發(fā)送多個請求XMLHttpRequest對象處理方法
AJAX中同時發(fā)送多個請求XMLHttpRequest對象處理方法...2007-04-04