JSP+Ajax 添加、刪除多選框

來源：懂視網責編：小采時間：2020-11-27 22:52:50

JSP+Ajax 添加、刪除多選框

JSP+Ajax 添加、刪除多選框:本例是采用JSP + Ajax + 文本來演示多選、全選，添加、刪除、更新checkbox多選框的效果。本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞數據，利用JSP操作文本的效果。 1，JavaScript 用來控制頁面內容的現實與增刪效果;2，JSP

推薦度：

點擊下載本文 文檔為doc格式

導讀JSP+Ajax 添加、刪除多選框:本例是采用JSP + Ajax + 文本來演示多選、全選，添加、刪除、更新checkbox多選框的效果。本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞數據，利用JSP操作文本的效果。 1，JavaScript 用來控制頁面內容的現實與增刪效果;2，JSP

本例是采用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。

本例子的優點:

1，實時創建html對象，所見即所得的頁面增刪操作。顯示速度加快，增加用戶體驗。
2，XML http傳遞數據是只是一個id或一個表單值,節省帶寬。
3，本例子適合采用XML http方式,所以這個效果實用性強，可是JS/JSP代碼都很簡單。
4，有很多東西可以在其他項目中共用,并且解決了操作文本關于中文字符編碼的問題。 (本例子在中文操作系統運行，所以選擇了GBK編碼，如果OS是英文的則需要另外處理，比如改編碼為UTF-8，或者根據需要另外轉換編碼。)
5，有拖拽以及展開關閉的效果，用cookie記錄了位置以及打開關閉狀態，可以在某個項目里用。
6，有豐富的注釋,適合初學者一起探討。

缺點：

1，維護調試麻煩,為了這個效果是否值得這樣做？如果采用普通的方式，嵌入一個iframe進來，會不會也可以。
2，代碼沒有更多地優化、簡寫,有些地方冗余。
3，交互設計方面沒有好好地做，這里主要表示的是技術實現和交流。

源文件下載：checkbox.rar
<HTML> <HEAD> <TITLE> JSP+Ajax 添加刪除Checkbox實例 example test</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <meta name="author" content="http://www.polareal.com/"/> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <style> .drag{position:absolute;width:600px; background-color:#f1f1f1; filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } .da{width:100%;background-color:gray;cursor:move;font-size:14px;vertical-align:middle;line-height:30px} .max_min_btn{float:right;color:red;cursor:pointer;font-size:9pt;width:50px;line-height:30px;text-align:center;} #list{border-top:2px ridge #9A9898;border-left:2px ridge #9A9898;border-bottom:1px solid #D4D0C8;border-right:1px solid #D4D0C8;background:white;width:578px;height:350px;margin:10px;overflow:auto} .shadowBottom{margin-left:6px;height:5px;background:gray;font-size:0px;line-height:0px;filter:alpha(opacity=55);-moz-opacity:0.55;opacity:0.55;} </style> <pre> 本例是采用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。在線說明文檔 http://jiarry.blogchina.com/5599587.html 靜態頁面演示地址：http://jarryli.googlepages.com/checkbox_test.html (詳細的說明，隨后補充) 源文件下載地址：http://jarryli.googlepages.com/checkbox.rar 另外之前做的 PHP+Ajax 發帖程序實例:http://jiarry.blogchina.com/5555296.html 源碼下載:http://jarryli.googlepages.com/post_ajax.rar JSP登錄證碼無刷新提示:http://jiarry.blogchina.com/5287654.html 源碼下載:http://jarryli.googlepages.com/imgValidate.rar <font style="font-family:webdings">2</font>CLOSE 拖拽區 <form name="sitelist" onSubmit="return addSite(this);" style="border:1px groove blue;margin:0;padding:0;border-top:0;"><br clear="all"> http:// <INPUT TYPE="text" size="30" NAME="url" onmouseover="this.focus()"> <INPUT TYPE="button" NAME="add" value="添加網址至列表" onClick="addSite(this.form)"> <input type=checkbox value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example1.com <input type=checkbox value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example2.com <INPUT TYPE="button" NAME="check" value="全選" disabled onClick="checkall(this.form)"> <input type="button" value="反選" name="recheck" disabled onclick="reverseCheck(this.form)"> <INPUT TYPE="button" NAME="remove" disabled value="刪除" onClick="del($('list'),this.form)"> </form> Cody by JarryLi@gmail.com; CopyRight?Jarry,All right reserved! 本例僅供個人參考，引用請保留版權信息。謝謝！ homepage:jiarry.126.com Blog:http://jiarry.blogchina.com </BODY> </HTML>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

由于時間有限，難免有很多問題，希望大家提出來。其實本例做的并不怎么好，拿出來希望眾位多多入指點，同時也希望對同樣是初學者的朋友來說有幫助，也希望大家一起交流進步，謝謝！:p

另外之前做的有關Ajax的東東，順便請供參考，謝謝！

PHP+Ajax 發帖程序實例:　http://jiarry.blogchina.com/5555296.html　
源碼下載:　post_ajax.rar

JSP登錄證碼無刷新提示:　http://jiarry.blogchina.com/5287654.html　
源碼下載:　imgValidate.rar

代碼沒有整理，優化，所以本例子只供大家交流參考用，希望可以通過這種方式得到各位的幫助，謝謝！

經典論壇討論：
http://bbs.blueidea.com/viewthread.php?tid=2673442

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com