In this example, JSP + Ajax + text is used to demonstrate the effects of multiple select, all select, add, delete, and update checkbox multi-select boxes..
This example fully demonstrates the use of JavaScript to control html dom and the use of XML http to transmit data, and the use of JSP to operate on text..
1. JavaScript is used to control the reality of page content and add and delete results;
2. JSP acts as the background to read, write, and update text;
3, text format is used to store data, data encoding UTF-8; 4, this example in win32, Red hat Linux 9 jdk1.5, Tomcat 5.0, Apache 2.5 debugging through, compatible with Firefox 1.0, Opera 8.0, and IE6.
Advantages of this example:
1. Create an html object in real time, and add or delete the WYSIWYG page. The display speed is faster and the user experience is increased.
2. XML http transmits data only as an id or form value, saving bandwidth.
3. This example is suitable for XML http, so this effect is highly practical, but JS/JSP code is very simple.
4. There are many things that can be used in other projects and solve the problem of operating texts on Chinese character encoding. (This example runs in the Chinese operating system, so the GBK encoding is selected, if the OS is English, it needs to be processed separately, such as encoding to UTF-8, or according to the need to convert the encoding .)
5. You can drag and drop a project to display the closed state. You can use cookies to record the location and enable the closed state.
6. There are rich comments for beginners to explore together.
Disadvantages:
1. Maintenance and debugging are troublesome. Is it worth doing so for this effect? If you embed an iframe in a normal way, will it work.
2. The code is not optimized or abbreviated, and sometimes redundant.
3. The interaction design is not well done. Here we mainly show the technical implementation and communication.
Source File Download: Checkbox.rar
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> JSP + Ajax add and delete Checkbox instance example test </TITLE> <meta name = "Generator" CONTENT = "EditPlus"> <meta name = "Author" CONTENT = ""> <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: 3 50px; 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> This example uses JSP + Ajax + text to demonstrate multiple and all selections, adds, deletes, and updates the results of multiple checkbox selection. This example shows how to use JavaScript to control html dom and XML http to transmit data, and JSP to manipulate text. 1. JavaScript is used to control the reality of page content and add and delete results; 2. JSP is used as the background to read, write, and update text; 3. The text format is used to store data, data Encoding UTF-8; 4, this example in win32, Red hat Linux 9 JDK 5.0, Tomcat 2.5, Apache 1.0 debugging passed, while compatible with Firefox 8.0, Opera, IE6. Online instructions http://jiarry.blogchina.com /5599587.html Static Page demo address: http://jarryli.googlepages.com/checkbox_test.html (Detailed description, supplemented later) source file: http://jarryli.googlepages.com/checkbox.rar In addition, the preceding PHP + Ajax post program example is as follows: http://jiarry.blogchina.com /5555296.html source code download: http://jarryli.googlepages.com/post_ajax.rar Prompt for refreshing JSP verification code: http://jiarry.blogchina.com /5287654.html source code download: http://jarryli.googlepages.com/imgValidate.rar 2 CLOSE the drag area Cody by JarryLi@gmail.com; CopyRight? Jarry, All right reserved! This example is for personal reference only. Please retain the copyright information for reference. Thank you! Homepage: jiarry.126.com Blog: http://jiarry.blogchina.com </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Due to limited time, it is inevitable that there will be many problems. I hope you can raise them. In fact, this example is not very good. I hope the audience can give more guidance and help to beginners. I also hope that everyone can exchange ideas and make progress together. Thank you! : P
In addition, for more information about Ajax, please refer to it. Thank you!
PHP + Ajax posting program example:Http://jiarry.blogchina.com/5555296.html
Download source code:Post_ajax.rar
Prompt for refreshing JSP verification code:Http://jiarry.blogchina.com/5287654.html
Download source code:ImgValidate.rar
The code is not sorted and optimized. Therefore, this example is for your reference only. I hope you can help me with this method. Thank you!
Classic forum discussion:
Http://bbs.blueidea.com/viewthread.php? Tid = 2673442
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
