以下为引用的内容: 用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', act); req.setRequestHeader('Content-Type', '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> |