JSP+Ajax 添加、刪除多選框
本例是采用JSP + Ajax + 文本來演示多選、全選，添加、刪除、更新checkbox多選框的效果。
本例充分展現(xiàn)了利用JavaScript控制HTML DOM以及利用XML http 傳遞數(shù)據(jù)，利用JSP操作文本的效果。
1，JavaScript 用來控制頁面內(nèi)容的現(xiàn)實與增刪效果;
2，JSP作為后臺，對文本進行讀取、寫入、更新等操作;
3，文本格式是用來存儲數(shù)據(jù)的，數(shù)據(jù)編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調(diào)試通過，同時兼容Firefox 1.0,Opera 8.0,IE6。
本例子的優(yōu)點:
1，實時創(chuàng)建html對象，所見即所得的頁面增刪操作。顯示速度加快，增加用戶體驗。
2，XML http傳遞數(shù)據(jù)是只是一個id或一個表單值,節(jié)省帶寬。
3，本例子適合采用XML http方式,所以這個效果實用性強，可是JS/JSP代碼都很簡單。
4，有很多東西可以在其他項目共用,并且解決了操作文本關(guān)于中文字符編碼的問題。 (本例子在中文操作系統(tǒng)運行，所以選擇了GBK編碼，如果OS是英文的則需要另外處理，比如改編碼為UTF-8，或者根據(jù)需要另外轉(zhuǎn)換編碼。)
5，有拖拽以及展開關(guān)閉的效果，用cookie記錄了位置以及打開關(guān)閉狀態(tài)，可以在某個項目里用。
6，有豐富的注釋,適合初學(xué)者一起探討。
缺點：
1，維護調(diào)試麻煩,為了這個效果是否值得這樣做？如果采用普通的方式，嵌入一個iframe進來，會不會也可以。
2，代碼沒有更多地優(yōu)化、簡寫,有些地方冗余。
3，交互設(shè)計方面沒有好好地做，這里主要表示的是技術(shù)實現(xiàn)和交流。
源文件下載：checkbox.rar
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
由于時間有限，難免有很多問題，希望大家提出來。其實本例做的并不怎么好，拿出來希望眾位多多入指點，同時也希望對同樣是初學(xué)者的朋友來說有幫助，也希望大家一起交流進步，謝謝！:p
另外之前做的有關(guān)Ajax的東東，順便請供參考，謝謝！
PHP+Ajax 發(fā)帖程序?qū)嵗? http://jiarry.blogchina.com/5555296.html
源碼下載: post_ajax.rar
JSP登錄證碼無刷新提示: http://jiarry.blogchina.com/5287654.html
源碼下載: imgValidate.rar
代碼沒有整理，優(yōu)化，所以本例子只供大家交流參考用，希望可以通過這種方式得到各位的幫助，謝謝！
經(jīng)典論壇討論：
http://bbs.blueidea.com/viewthread.php?tid=2673442
- Js自定義多選框效果的實例代碼
- 用原生JS實現(xiàn)簡單的多選框功能
- AngularJS 單選框及多選框的雙向動態(tài)綁定
- html+javascript+bootstrap實現(xiàn)層級多選框全層全選和多選功能
- AngularJS單選框及多選框?qū)崿F(xiàn)雙向動態(tài)綁定
- JavaScript判斷表單中多選框checkbox選中個數(shù)的方法
- JS 實現(xiàn)列表與多選框選擇附預(yù)覽動畫
- ExtJS 下拉多選框lovcombo
- ExtJS Grid使用SimpleStore、多選框的方法
- 用 Javascript 驗證表單(form)中多選框(checkbox)值
- javascript 單選框，多選框美化代碼
- 兼容ie和firefox版本的js反選 全選 多選框
- JS面向?qū)ο笾噙x框?qū)崿F(xiàn)
相關(guān)文章
如果你的網(wǎng)站含有文件上傳功能，那可以使用本文介紹的5款A(yù)jax文件上傳控件，提升用戶體驗。要知道，上傳文件總是個痛苦的過程，要消除不太現(xiàn)實，但至少如果你為減少用戶的痛苦努力了，那用戶也會喜歡你的網(wǎng)站的。2009-10-10
ajax的json傳值想必大家早有所耳聞了吧，本文介紹下jsp頁面中json傳值應(yīng)用，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要介紹了關(guān)于Ajax的封裝詳解,ajax用于瀏覽器與服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請求),做到局部請求以實現(xiàn)局部刷新,本篇講解ajax的封裝,需要的朋友可以參考下2023-05-05
ajax實現(xiàn)select三級聯(lián)動效果
這篇文章主要為大家詳細介紹了ajax動態(tài)實現(xiàn)select三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
laravel ajax curd 搜索登錄判斷功能的實現(xiàn)
這篇文章主要介紹了laravel ajax curd 搜索登錄判斷功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了Ajax修改購物車的思路及具體實現(xiàn)，需要的朋友可以參考下2014-07-07
ajax中文亂碼問題在中文中經(jīng)常會出現(xiàn)這種問題，其實只要稍加注意就不會出現(xiàn)ajax中文亂碼這回事情了，接下來為大家詳細介紹下如何解決這類問題2013-04-04
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。接下來通過本文給大家講解ajax的工作原理及優(yōu)缺點，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了Ajax獲取響應(yīng)內(nèi)容長度的方法,涉及Ajax調(diào)用成功后返回方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
asp+Ajax簡單客戶登陸驗證...2007-03-03