以下为引用的内容: 用js实现ajax无刷新修改图片标题和描述的前台代码; 一个html文件,内容如下: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>ajax修改</title> <script language=javascript> // IE support if (window.ActiveXObject && !window.XMLHttpRequest) { window.XMLHttpRequest=function() { return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'); }; } //修改描述 function update(photoID,descvalue) { var req=new XMLHttpRequest(); if (req) { req.onreadystatechange=function(){ if (req.readyState==4 && req.status==200) { if (req.responseText!=) alert(req.responseText); } } } var act= document.getElementById(path).value+/AjaxCtrl; req.open('POST',act); req.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); req.send(page=UpdatePhotoDescPage&photoID=+photo_id+&desc=+descvalue); } function initDesc(photoID){ var desc=document.getElementById(txto); desc.onclick=; desc.onmouseover=; var str = document.getElementById('hid').value; if(str==点击添加照片描述) str=; desc.innerHTML=<textarea id='txt' class='highlight' style='margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 820px' rows='5'>+str.replace(/<br>/g,'')+</textarea><br><input type='button' value='保存' onclick='getvalue(+photoID+);' /> <input type='button' value='取消' onclick='resetDescHTML(+photoID+);' />; } function getvalue(photoID){ desctxt=document.getElementById(txt); var desc=document.getElementById(txto); var descvalue=desctxt.value.replace(/(^s*)|(s*$)/g,''); var str=descvalue; if(str.length > 2000){ alert(描述字数最多只能是2000个汉字!请重新输入。); return; } desc.innerHTML=正在保存中。。。。。。; if(str==''){ update(photoID,''); document.getElementById('hid').value=''; desc.innerHTML=<div id='sp' onclick='initDesc(+photoID+);' style='width: 320px' onmouseover='ch(this);' onmouseout='res(this);'><i style='color: #888; width: 240px'>点击添加图片描述</i></div>; } else { update(photoID,str); document.getElementById('hid').value = descvalue; desc.innerHTML=<div id='sp' onclick='initDesc(+photoID+);' style='width: 320px; word-wrap: break-word;' onmouseover='ch(this);' onmouseout='res(this);'>+filtertxtd(document.getElementById('hid').value)+</div>; } } function resetDescHTML(photoID){ var desc=document.getElementById(txto); if(document.getElementById('hid').value=='' || document.getElementById('hid').value=='点击添加照片描述'){ desc.innerHTML=<div id='sp' onclick='initDesc(+photoID+);' style='width: 320px' onmouseover='ch(this);' onmouseout='res(this);'><i style='color: #888; width: 320px' onmouseover='res(this);' onmouseout='ch(this);'>点击添加照片描述<i></div>; } else { desc.innerHTML=<div id='sp' onclick='initDesc(+photoID+);' style='margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px; word-wrap: break-word;' onmouseover='ch(this);' onmouseout='res(this);'>+filtertxtd(document.getElementById('hid').value)+</div>; } } //修改标题 function updateTit(photoID,titvalue) { var req=new XMLHttpRequest(); if (req) { req.onreadystatechange=function(){ if (req.readyState==4 && req.status==200) { if (req.responseText!=) alert(req.responseText); } } } var act= document.getElementById(path).value+/AjaxCtrl; req.open('POST','application/x-www-form-urlencoded'); req.send(page=UpdatePhotoTitlePage&photoID=+photo_id+&title=+titvalue); } function initTit(photoID) { var tit=document.getElementById(tit); tit.onclick=; tit.onmouseover=; var str = document.getElementById('hidTit').value; if(str==点击添加照片名称) str=; tit.innerHTML=<input type='text' id='txtTit' class='highlight' style='margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px' value=' + str + 'maxlength='50' /><br><input type='button' value='保存' onclick='getTit(+photoID+);' /> <input type='button' value='取消' onclick='resetTitHTML(+photoID+);' />; } function getTit(photoID) { var txtTit=document.getElementById(txtTit); var tit=document.getElementById(tit); var titvalue=txtTit.value.replace(/(^s*)|(s*$)/g,''); tit.innerHTML=正在保存中。。。。。。; if(titvalue==''){ updateTit(photoID,''); document.getElementById(hidTit).value=''; tit.innerHTML=<div id='sp' onclick='initTit(+photoID+);' style='width: 320px' onmouseover='ch(this);' onmouseout='res(this);'><i style='color: #888'>点击添加照片名称</i></div>; } else { updateTit(photoID,titvalue); document.getElementById(hidTit+idx).value=filtertxtd(titvalue); tit.innerHTML=<div id='sp' onclick='initTit(+photoID+);' style='width: 320px' onmouseover='ch(this);' onmouseout='res(this);'><h4 id='title_div44177575' style='margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px'>+document.getElementById(hidTit).value+</h4></div>; } } function resetTitHTML(photoID) { var tit=document.getElementById(tit); if(document.getElementById('hidTit').value=='' || document.getElementById('hidTit').value=='点击添加照片名称') { tit.innerHTML=<i style='color: #888' onclick='initTit(+photoID+);' onmouseover='ch(this);' onmouseout='res(this);'>点击添加照片名称</i>; tit.onmouseover=ch(this);; } else { tit.innerHTML=<div id='sp' onclick='initTit(+photoID+);' onmouseover='ch(this);' onmouseout='res(this);' style='width: 320px; word-wrap: break-word;'><h4 id='title_div44177575' style='margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px'>+filtertxtd(document.getElementById('hidTit').value)+</h4></div>; } } function ch(activeX){ activeX.style.background=#ffc; } function res(activeX){ activeX.style.background=#fff; } function filtertxtd(str){ var filterStr=str.replace(/(^s*)|(s*$)/g,'').replace(/</g,<).replace(/>/g,>).replace(//g,<br>); return filterStr; } </script> </head> <body> <input type=hidden id=hidTit value=点击添加照片名称 /> <div title=点击修改照片名称 id=tit onclick=initTit('1'); onmouseover=ch(this); onmouseout=res(this); style=width: 320px; word-wrap: break-word;> <i style=color: #888;>点击添加照片名称</i> </div> <br/> <div><div title=点击修改照片描述 id=txto style=width: 820px; word-wrap: break-word; onclick=initDesc('1'); onmouseover=ch(this); onmouseout=res(this);><i style=color: #888;>点击添加照片描述</i></div> </div> <input type=hidden id=hid value=点击添加照片描述 /> </div> </div> </body> </html> |
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。