用js实现ajax无刷新修改图片标题和描述

以下为引用的内容：

用js实现ajax无刷新修改图片标题和描述的前台代码；

<!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>

用js实现ajax无刷新修改图片标题和描述

相关推荐