网站地图    收藏   

子栏目

主页 > php专栏 > php应用 >

php+ajax文章自动保存代码实例方法 - php高级应用

来源：自学PHP网    时间：2014-11-27 22:16 作者： 阅读:次

[导读] php+ajax文章自动保存代码实例方法主是要方便用户,提高用户体验,我们就是用ajax把数据保存一个临时数据,像csdn一样,他可以自动保存用户的数据,这样就是掉电,出现意外你编辑的数据都不...

php+ajax文章自动保存代码实例方法

php+ajax文章自动保存代码实例方法主是要方便用户,提高用户体验,我们就是用ajax把数据保存一个临时数据,像csdn一样,他可以自动保存用户的数据,这样就是掉电,出现意外你编辑的数据都不人被丢失.

这是自动保存草稿的核心的一部分,

autosavetime(sec)　这个函数是用来开始计时的

clearTimeout(autosavetimer);清除定时器

document.getElementById('autosavetimebox').innerHTML=sec+"秒";取得页面中的autosavetimebox对像,并向其写入倒计时

  1. if(sec>0) { 
  2.        autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000);　　 
  3.      //这里就是如果当sec>0的时候，第一秒执行一次autosavetime这个函数，同时会把sec-1的值写入autosavetimebox中 
  4. }else { 
  5.           var title=document.getElementById('title'); 
  6.           if(title.value!=''){ 
  7.                                   autosave_post(); 
  8.           }else{ 
  9.                  document.getElementById('autosavetimebox').innerHTML='不用保存';    
  10.           } }

这一部分,就是当sec>0的条件不成立,呵呵,就是sec<=0的时候,开始执行保存草稿,首先会判断文章的标题是否为空,如果不会为空,就执行autosave_post()这个函数,否则就写入‘不用保存’.

php代码如下:

  1. var userAgent = navigator.userAgent.toLowerCase(); 
  2. var is_opera  = (userAgent.indexOf('opera') != -1); 
  3. var is_saf    = ((userAgent.indexOf('applewebkit') != -1) || (navigator.vendor == 'Apple Computer, Inc.')); 
  4. var is_webtv  = (userAgent.indexOf('webtv') != -1); 
  5. var is_ie     = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_saf) && (!is_webtv)); 
  6. var is_ie4    = ((is_ie) && (userAgent.indexOf('msie 4.') != -1)); 
  7. var is_moz    = ((navigator.product == 'Gecko') && (!is_saf)); 
  8. var is_kon    = (userAgent.indexOf('konqueror') != -1); 
  9. var is_ns     = ((userAgent.indexOf('compatible') == -1) && (userAgent.indexOf('mozilla') != -1) && (!is_opera) && (!is_webtv) && (!is_saf)); 
  10. var is_ns4    = ((is_ns) && (parseInt(navigator.appVersion) == 4)); 
  11. var is_mac    = (userAgent.indexOf('mac') != -1); 
  12. if ((is_ie & !is_ie4) || is_moz || is_saf || is_opera) 
  13. { 
  14.     var allowajax=1; 
  15. }else{ 
  16.     var allowajax=0; 
  17. } 
  18. var xmlHttp = false; 
  19. function makeSendData(postData,url,functionName,httptype) { 
  20.  
  21. var posturl=url; 
  22. try { 
  23.    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  24. } catch (e) { 
  25.    try { 
  26.      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  27.    } catch (e2) { 
  28.      xmlHttp = false; 
  29.    } 
  30. } 
  31. if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
  32.    xmlHttp = new XMLHttpRequest(); 
  33. } 
  34.  
  35. if (!xmlHttp) { 
  36.         alert('Cannot send an XMLHTTP request'); 
  37.         return false; 
  38. } 
  39.  
  40. // 提交表单的方式 
  41. xmlHttp.open(httptype, posturl, true); 
  42.  
  43. // 当表单提交完成后触发一个事件 
  44. var changefunc="xmlHttp.onreadystatechange = "+functionName;  ///////from bob 
  45. eval (changefunc); 
  46. xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
  47. xmlHttp.send(postData); 
  48. } 
  49. function autosave_post() 
  50. { 
  51.     var title=document.getElementById('title').value; 
  52.     var content = window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; 
  53.     var postTime=document.getElementById('postTime').value; 
  54.     if(allowajax==1) 
  55.     { 
  56.         content=postencode(content); 
  57.         title=postencode(title); 
  58.         var post="title="+title+"&content="+content+"&postTime="+postTime+""; 
  59.         var url="ajax.php?act=autosave"; 
  60.         makeSendData(post,url,'autosave','POST'); 
  61.     } 
  62. } 
  63. function autosave() 
  64. { 
  65.     if(xmlHttp.readyState == 4) 
  66.     { 
  67.         if(xmlHttp.status == 200) 
  68.         { 
  69.             var autoresponse=xmlHttp.responseText; 
  70.             var automessage=document.getElementById('autosavetimebox'); 
  71.             if(autoresponse.indexOf("<autosave_error>")!=-1) 
  72.             { 
  73.                 automessage.innerHTML='您还没有添写信息，不用保存草稿'; 
  74.                 return false; 
  75.             } 
  76.             if(autoresponse.indexOf("<autosave_ok>")!=-1) 
  77.             { 
  78.                 automessage.innerHTML='保存成功，您可以在发生意外的时候载入草稿'; 
  79.                 finddraft(); 
  80.             } 
  81.         } 
  82.     } 
  83. } 
  84. function finddraft() 
  85. { 
  86.     if(allowajax==1) 
  87.     { 
  88.         var url="ajax.php?act=loaddraft"; 
  89.         makeSendData(null,url,'loaddraft','POST'); 
  90.     } 
  91. } 
  92. function loaddraft() 
  93. { 
  94.     var draftbox=document.getElementById('draft'); 
  95.     if(xmlHttp.readyState < 4) 
  96.     { 
  97.         draftbox.innerHTML='草稿载入中...'; 
  98.     } 
  99.     if(xmlHttp.readyState == 4) 
  100.     { 
  101.         if(xmlHttp.status == 200) 
  102.         { 
  103.             draftbox.innerHTML=xmlHttp.responseText; 
  104.         } 
  105.     } 
  106. } 
  107. function cleardraft() 
  108. { 
  109.     if(allowajax==1) 
  110.     { 
  111.         var url="ajax.php?act=cleardraft"; 
  112.         makeSendData(null,url,'nodraft','POST'); 
  113.     } 
  114. } 
  115. function nodraft() 
  116. { 
  117.     var draftbox=document.getElementById('draft'); 
  118.     if(xmlHttp.readyState < 4) 
  119.     { 
  120.         draftbox.innerHTML='载入中...'; 
  121.     } 
  122.     if(xmlHttp.readyState == 4) 
  123.     { 
  124.         if(xmlHttp.status == 200) 
  125.         { 
  126.             draftbox.innerHTML=xmlHttp.responseText; 
  127.         }//开源代码phpfensi.com 
  128.     } 
  129. } 
  130. //encode string 
  131. function postencode (str) {  
  132.     str=encodeURIComponent(str); 
  133.     if (is_moz) str=str.replace(/%0A/g, "%0D%0A"); //from bob 
  134.     return str; 
  135. } 

自动保存的js代码,代码如下:

  1. var autosavetimer; 
  2. function autosavetime(sec) { 
  3.    clearTimeout(autosavetimer); 
  4.    document.getElementById('autosavetimebox').innerHTML=sec+"秒"; 
  5.    if(sec>0) { 
  6.        autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000); 
  7.    }else { 
  8.        var blogtitle=document.getElementById('title'); 
  9.        if(blogtitle.value!=''){ 
  10.            autosave_post(); 
  11.        }else{ 
  12.            document.getElementById('autosavetimebox').innerHTML='不用保存';   
  13.        } 
  14.    } 
  15. } 
  16. function startimer() 
  17. { 
  18.     var starttime=document.getElementById('autosavetimebox').innerHTML; 
  19.     if(starttime=='保存成功，您可以在发生意外的时候载入草稿' || starttime=='您还没有添写信息，不用保存草稿') 
  20.     { 
  21.         starttime='60'; 
  22.     }else{ 
  23.         starttime=starttime.replace('秒',''); 
  24.     } 
  25.     var autosavefunbox=document.getElementById('autosavefunbox'); 
  26.     autosavefunbox.innerHTML='<a href="javascript教程:" onClick="javascript：stoptimer()">停止计时</a>'; 
  27.     starttime==0 ? starttime=60 : starttime=starttime; 
  28.     autosavetime(starttime); 
  29. } 
  30. function stoptimer() 
  31. { 
  32.     var autosavefunbox=document.getElementById('autosavefunbox'); 
  33.     autosavefunbox.innerHTML='<a href="javascript：" onClick="javascript：startimer()">开始计时</a>'; 
  34.     clearTimeout(autosavetimer); 
  35. } 

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论