JSP+Ajax 添加、删除多选框

更新时间：2006年10月09日 00:00:00 投稿：mdxy-dxy

这篇文章主要介绍了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。

本例子的优点:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> JSP+Ajax 添加删除Checkbox实例 example test</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script type="text/javascript">function $() {  var elements = new Array();  for (var i = 0; i < arguments.length; i++) {    var element = arguments[i];    if (typeof element == ’string’)      element = document.getElementById(element);    if (arguments.length == 1)       return element;    elements.push(element);  }  return elements;}//cody by jarry;var emptyCol="",overCol="#f1f1f1",checkedCol="#F4FFF4";function getAbsoluteLeft( ob ){ if(!ob){return null;}   var obj = ob;   var objLeft = obj .offsetLeft;   while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){     objLeft += obj .offsetParent.offsetLeft;     obj = obj .offsetParent;   } return objLeft ;}// get absolute TOP positionfunction getAbsoluteTop( ob ){ if(!ob){return null;} var obj = ob; var objTop = obj .offsetTop; while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){   objTop += obj .offsetParent.offsetTop;   obj = obj .offsetParent; } return objTop ;}String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g, "");}function isExist(child,obj){        //obj has element the child;   for(var i=0;i<obj.elements.length;i++){    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){       if(obj.elements[i].value==child)return true;    }   }   return false;}function validateURL(url){    //validateURL    if(url.search(/^[A-Za-z0-9 -]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\’:+!]*([^<>\"\"])*$/)!=0){    return false;    //}else if(url.substring(0,4)=="www."){    //return false;    }else{    return true;    }}function countLength(obj){ if(obj==null)return; var dLen = 0,sLen = 0; for(i=0; i< obj.length; i++ ){   if(obj.charCodeAt(i) > "0" && obj.charCodeAt(i) < "128")     sLen+=1;    else      dLen+=2; }  totalLen = sLen+dLen;  return totalLen;}var strAll=unescape("%u5168%u9009");var canAll=unescape("%u53D6%u6D88");function clickchk(obj){var allcheck=true;   for(var i=0;i<obj.elements.length;i++){    var eli = obj.elements[i];    if(eli.tagName.toLowerCase()=="input" && eli.type=="checkbox"){      eli.parentNode.style.backgroundColor = eli.checked ? checkedCol :"";      if(eli.checked==false){allcheck=false;}     }  }  obj.elements["check"].value=allcheck?canAll:strAll;  }function addSite(obj){  var url=obj.url.value.trim();  if(url.match(/^\s*$/g) || !validateURL(url)){alert("请输入正确网址：如mysite.com");obj.url.focus();return;}  if(isExist(url,obj)){alert("你添加的网址已经存在列表中");return;}  var list=document.getElementById("list");  var chkbox=document.createElement("input");  chkbox.type="checkbox";  chkbox.onclick=function(){clickchk(obj);}//全部选择后check按钮显示取消;  chkbox.value=url;  chkbox.name="url_chkbox";  var hr=document.createElement("hr");  hr.size="0";hr.style.borderTop="1px solid gray";  var txt=document.createTextNode(url);    var div=document.createElement("div");  div.appendChild(chkbox);  div.appendChild(txt);  div.style.borderBottom="1px dashed gray";  div.style.padding="5px";  //div.appendChild(hr);  //div.style.backgroundColor = "olive";  div.onmouseover=function(){   showDelete(this);  }  div.onmouseout=function(){   hideDelete(this);  }    list.appendChild(div);//end add;//如果已经添加了多选框则去掉禁用;  if(obj.check.disabled==true){    obj.check.disabled=false;    obj.recheck.disabled = false;    obj.remove.disabled=false;    }return false;}function checkall(obj){//全选or取消全选;    var chk=obj.elements["check"];   for(var i=0;i<obj.elements.length;i++){    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){      if(chk.value==strAll){//check all checkbox input;      obj.elements[i].checked=true;      obj.elements[i].parentNode.style.backgroundColor = checkedCol;      }else{       obj.elements[i].checked=false;       obj.elements[i].parentNode.style.backgroundColor = emptyCol;      }             }  }   if($(’list’).childNodes.length<=1)return;  chk.value=chk.value==canAll?strAll:canAll;  //更改全选/取消的显示;}function reverseCheck(obj){      var chk=obj.elements["check"];   for(var i=0;i<obj.elements.length;i++){    if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){      obj.elements[i].checked = obj.elements[i].checked ? false : true;    }    clickchk(obj);  } }function del(list,obj){//删除list的内容  var candel=false;  var i=list.childNodes.length;  var end = -1;   while(  i > end ){  //如果存在child     var  s=list.childNodes[i];     if(typeof(s)!="undefined"  && s.tagName){         try{ //如果child的类型不为空;                var tgname = s.tagName.toUpperCase();                if(tgname != "DIV" || s.childNodes.length <=0 )return;                //子集是div且还有子集                var s1 = s.childNodes[0];                if( s1.type.toLowerCase() =="checkbox" && s1.checked==true ){                //如果该子集里的checkbox选中,那么删除改子集(div);                 candel = true;                         list.removeChild(s);               }                      }catch(ex){            //alert(ex.toString());                  }       }              i--;   }   if(candel==false){alert("请选择你要删除的选项")}  isDisabledButton();     }function isDisabledButton(){  var objform=document.sitelist;  var list=$("list"); var hasDivChild = false; if(list.childNodes.length>0 ){     for(var i=0;i<list.childNodes.length;i++){        var s=list.childNodes[i];        if( typeof(s)!="undefined"  && s.tagName) {            if(s.tagName.toUpperCase()=="DIV")            hasDivChild = true;        }     } }  objform.check.disabled= hasDivChild?false:true;  objform.recheck.disabled= hasDivChild?false:true;  objform.check.value=strAll;  objform.remove.disabled= hasDivChild?false:true; }function delSingle(objparent,objdel,objchild){       objparent.removeChild(objchild);       objdel.style.display="none";//   isDisabledButton();  }function editSingle(objparent,objedit,objchild){          function makeLink(text , tag){         var temobj = document.createElement(tag);         temobj.style.marginLeft="5px"; temobj.style.marginRight="5px";         temobj.style.textDecoration="underline";temobj.style.cursor="pointer";         temobj.appendChild( document.createTextNode(text) );          return temobj;          }     try{     var secondChild = objchild.childNodes[1];     var url = secondChild;     var urlStr =  url.nodeValue ;//? url.nodeValue : url.toString() ;     if(urlStr==null || urlStr.trim=="")return;     var editorPanel = document.createElement("span");     objchild.removeChild(url);     var editor = document.createElement("input");     editor.type="text";     //var maxLen = parseInt(objparent.style.width) - 250;     var maxLen = 50;     var thisLen = parseInt( countLength(urlStr) );     editor.size =  maxLen > thisLen ? thisLen : maxLen;     editor.value = urlStr;     editor.select();     editor.onmouseover=function(){this.select();}     var update =  makeLink("update","font");update.title="更新";     update.onclick=function(){        //updateContens();        var newvalue = editor.value;        if(newvalue.trim() == ""){editor.focus();return;}        objchild.removeChild(objchild.childNodes[1]);        objchild.appendChild(document.createTextNode(newvalue));     }     var cancle =  makeLink("cancle","font");cancle.title="取消";     cancle.onclick=function(){        objchild.removeChild(objchild.childNodes[1]);        objchild.appendChild(url);     }     //add to editorPanel;     editorPanel.style.fontSize="11px";     editorPanel.style.color="blue";     editorPanel.appendChild(editor);     editorPanel.appendChild(update);     editorPanel.appendChild(document.createTextNode("|"));     editorPanel.appendChild(cancle);     //add to objchild;     objchild.appendChild(editorPanel);   }catch(ex){      alert(ex.toString());   }finally{      //   }}var currentDiv;function showDelete(self){  self.style.backgroundColor = overCol; currentDiv = self; var theid = "del_icon"; if(!$(theid)){     var delDiv=document.createElement("div");     delDiv.id=theid;     var d=delDiv;     d.style.textAlign="center";d.style.fontSize="11px";     var edit = document.createElement("span");     edit.title="编辑此条";edit.style.textDecoration="underline";     edit.onclick=function(){         editSingle(currentDiv.parentNode,this.parentNode,currentDiv);     }     var del =  document.createElement("span");     del.title="删除此条";del.style.textDecoration="underline";     del.onclick=function(){         delSingle(currentDiv.parentNode,this.parentNode,currentDiv);     }     edit.appendChild(document.createTextNode("edit"));     d.appendChild(edit);     d.appendChild(document.createTextNode(" | "));     del.appendChild(document.createTextNode("delete"));     d.appendChild(del);     d.style.width="80px";     d.style.lineHeight="20px";     d.style.color="blue";    // d.style.zIndex="-10";//     d.style.backgroundColor="green";     document.body.appendChild(d);     $(theid).onmouseover=function(){      currentDiv.style.backgroundColor = overCol;      this.style.display="";      //mouseOndeleteDiv=true;     }     //     $(theid).style.cursor="pointer"; } if($(theid)){   $(theid).style.display="";   var l= getAbsoluteLeft(self) + self.offsetWidth - 80;   var t= getAbsoluteTop(self) + 5;   var scrollT = self.parentNode.scrollTop;//减去出现滚动条的高度;   var t= getAbsoluteTop(self) + 5 - scrollT;   $(theid).style.position="absolute";   $(theid).style.left = l+"px";   $(theid).style.top = t+"px"; }}function hideDelete(self){ var theid = "del_icon";  if( $(theid) ){   self.style.backgroundColor = self.childNodes[0].checked?checkedCol:emptyCol;   $(theid).style.display="none";  }}</script></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。在线说明文档 <a href="http://jiarry.blogchina.com/5599587.html">http://jiarry.blogchina.com/5599587.html</a>静态页面演示地址：<A href="http://jarryli.googlepages.com/checkbox_test.html">http://jarryli.googlepages.com/checkbox_test.html</A> (详细的说明，随后补充)源文件下载地址：<A href="http://jarryli.googlepages.com/checkbox.rar">http://jarryli.googlepages.com/checkbox.rar</A>另外之前做的PHP+Ajax 发帖程序实例:<a href="http://jiarry.blogchina.com/5555296.html">http://jiarry.blogchina.com/5555296.html</a>  源码下载:<a href="http://jarryli.googlepages.com/post_ajax.rar">http://jarryli.googlepages.com/post_ajax.rar</a>JSP登录证码无刷新提示:<a href="http://jiarry.blogchina.com/5287654.html">http://jiarry.blogchina.com/5287654.html</a> 源码下载:<a href="http://jarryli.googlepages.com/imgValidate.rar">http://jarryli.googlepages.com/imgValidate.rar</a><div class="drag" rel="drag" id="siteMainDarg" style="left:10px;top:10px;" onMouseDown="dargit(this,event);"><div class="da" ><span class="max_min_btn" id="max_min" style="background-color:#333"><font style="font-family:webdings">2</font>CLOSE</span>&nbsp;&nbsp;拖拽区</div><div id="sitelistDiv" ><form name="sitelist" onSubmit="return addSite(this);" style="border:1px groove blue;margin:0;padding:0;border-top:0;"><br clear="all">&nbsp;&nbsp;http:// <INPUT TYPE="text" size="30" NAME="url" onmouseover="this.focus()"> <INPUT TYPE="button" NAME="add" value="添加网址至列表" onClick="addSite(this.form)"><div id="list"><div onMouseOver="showDelete(this);"  onmouseout="hideDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example1.com </div><div onMouseOver="showDelete(this);" onMouseOut="hideDelete(this);"  style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox  value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example2.com </div></div>&nbsp;&nbsp;<INPUT TYPE="button" NAME="check" value="全选" disabled onClick="checkall(this.form)">&nbsp;&nbsp;<input type="button" value="反选" name="recheck" disabled  onclick="reverseCheck(this.form)">&nbsp;&nbsp;<INPUT TYPE="button" NAME="remove" disabled value="删除" onClick="del($(’list’),this.form)"></form></div><div class="shadowBottom">&nbsp;</div></div>Cody by JarryLi@gmail.com;CopyRight?Jarry,All right reserved!本例仅供个人参考，引用请保留版权信息。谢谢！homepage:<a href="http://jiarry.126.com">jiarry.126.com</a>Blog:<a href="http://jiarry.blogchina.com">http://jiarry.blogchina.com</a><script>//页面加载时初始化function init(l,f){  var list=l;  f.check.disabled=list.childNodes.length>1?false:true;  f.recheck.disabled=list.childNodes.length>1?false:true;  f.check.value=strAll;  f.remove.disabled=list.childNodes.length>1?false:true; }window.onload=function(){    init($("list"),document.sitelist);}activeCookie = true;if(document.cookie==null){    //alert("cookie没有开启！");     activeCookie = false;}function getCookie(name) {    if( !activeCookie  ) return;    var nameEQ = name + "=";    var ca = document.cookie.split(’;’);    for(var i=0;i < ca.length;i++) {        var c = ca[i];        while (c.charAt(0)==’ ’) c = c.substring(1,c.length);        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);    }    return null;}function setCookie(name , value){    if( !activeCookie  ) return;    var expdate = new Date();    expdate.setTime(expdate.getTime() + (365*24*120));    document.cookie=""+ name + "=" + value +";expires="+ expdate.toGMTString();}var theLeft = getCookie("siteMainDargLeft")!=null ? getCookie("siteMainDargLeft") : 10;var theTop = getCookie("siteMainDargTop")!=null ? getCookie("siteMainDargTop") : 10;var listDivDisplay =  getCookie("sitelistDivDisplay")!=null ? getCookie("sitelistDivDisplay") : "";$("siteMainDarg").style.top = theTop;$("siteMainDarg").style.left = theLeft;$("sitelistDiv").style.display = listDivDisplay;//cookie end;////////////////////////var d_width = 550;var d_height = 30;var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//var x, y,rw,rh;    var divs=document.getElementsByTagName("div");    for (var i=0;i<divs.length;i++){          if(divs[i].getAttribute("rel")=="drag"){        divs[i].onmousemove=function(){           thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;        }      }    }function thismove(o){    rw = parseInt(x)-parseInt(getAbsoluteLeft(o));    rh = parseInt(y)-parseInt(getAbsoluteTop(o));}function dargit(o,e){thiso = o;canDrg = true; if(!document.all){      lx = e.clientX; ly = e.clientY;      }else{        lx = event.x; ly = event.y;      }  try{//设置渐变色;  if(rh<=d_height && rw<d_width &&rh>0){//设定在拖动区域      if(document.all)thiso.filters.Alpha.opacity=80;      else thiso.style.MozOpacity=80/100;  }}catch(e){}    st(o); }document.onmousemove = function(e){if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }if(canDrg){      if(rh<=d_height && rw<d_width &&rh>0){//如果要设定拖动区域可以作判断        var ofsx = x - lx;        thiso.style.left = (parseInt(thiso.style.left) + ofsx) +"px";        lx = x;        var ofsy = y - ly;        thiso.style.top = (parseInt(thiso.style.top) + ofsy) +"px";        ly = y;   }else{       canDrg=false;   } }}document.onmouseup=function(){        canDrg=false;//拖拽变量设为false try{  if(document.all)thiso.filters.Alpha.opacity=100;  else thiso.style.MozOpacity=100;}catch(e){}        if(document.all && thiso != null){         thiso.releaseCapture();           thiso = null;   }}function st(o){  if(rh <= d_height && rw >= d_width){   canDrg=false;   showHide($("sitelistDiv"));   }}function showHide(obj,self){   obj.style.display = obj.style.display=="none"?"":"none";   //$("del_icon").display="none";   var icon = "1";   var text = "OPEN";   if(obj.style.display==""){     icon = "2";     text = "CLOSE";   }    $("max_min").childNodes[0].innerHTML = icon;    $("max_min").childNodes[1].nodeValue = text;}window.onunload = function(){   setCookie("siteMainDargLeft",getAbsoluteLeft( $("siteMainDarg") ) );   setCookie("siteMainDargTop",getAbsoluteTop( $("siteMainDarg") ) );   setCookie("sitelistDivDisplay",$("sitelistDiv").style.display );   }</script></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

您可能感兴趣的文章:

JSP+Ajax 添加、删除多选框

5款Ajax 文件上传控件
如果你的网站含有文件上传功能，那可以使用本文介绍的5款Ajax文件上传控件，提升用户体验。要知道，上传文件总是个痛苦的过程，要消除不太现实，但至少如果你为减少用户的痛苦努力了，那用户也会喜欢你的网站的。
2009-10-10
ajax的json传值方式在jsp页面中的应用
ajax的json传值想必大家早有所耳闻了吧，本文介绍下jsp页面中json传值应用，感兴趣的你可以参考下哈，希望可以帮助到你
2013-03-03
关于Ajax的封装详解
这篇文章主要介绍了关于Ajax的封装详解,ajax用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新,本篇讲解ajax的封装,需要的朋友可以参考下
2023-05-05
ajax实现select三级联动效果
这篇文章主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
laravel ajax curd 搜索登录判断功能的实现
这篇文章主要介绍了laravel ajax curd 搜索登录判断功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
Ajax修改购物车示例
这篇文章主要介绍了Ajax修改购物车的思路及具体实现，需要的朋友可以参考下
2014-07-07
ajax中文乱码问题解决方案
ajax中文乱码问题在中文中经常会出现这种问题，其实只要稍加注意就不会出现ajax中文乱码这回事情了，接下来为大家详细介绍下如何解决这类问题
2013-04-04
AJAX工作原理及优缺点详解
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。接下来通过本文给大家讲解ajax的工作原理及优缺点，感兴趣的朋友一起看看吧
2016-11-11
Ajax获取响应内容长度的方法
这篇文章主要介绍了Ajax获取响应内容长度的方法,涉及Ajax调用成功后返回方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
asp+Ajax简单客户登陆验证
asp+Ajax简单客户登陆验证...
2007-03-03

JSP+Ajax 添加、删除多选框

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具