当前位置:首页 > PHP教程 > php应用 > 列表

php+ajax实现文章自动保存的方法

发布:smiling 来源: PHP粉丝网  添加日期:2021-05-05 13:18:50 浏览: 评论:0 

这篇文章主要介绍了php+ajax实现文章自动保存的方法,可实现文章内容的实时保存,防止突发情况下的数据丢失,是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了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.     var allowajax=1; 
  14. }else
  15.     var allowajax=0; 
  16. var xmlHttp = false; 
  17. function makeSendData(postData,url,functionName,httptype) { 
  18.  
  19. var posturl=url; 
  20. try { 
  21.    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  22. } catch (e) { 
  23.    try { 
  24.      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  25.    } catch (e2) { 
  26.      xmlHttp = false; 
  27.    } 
  28. if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
  29.    xmlHttp = new XMLHttpRequest(); 
  30.  
  31. if (!xmlHttp) { 
  32.         alert('Cannot send an XMLHTTP request'); 
  33.         return false; 
  34.  
  35. // 提交表单的方式 
  36. xmlHttp.open(httptype, posturl, true); 
  37.  
  38. // 当表单提交完成后触发一个事件 
  39. var changefunc="xmlHttp.onreadystatechange = "+functionName;  ///////from bob 
  40. eval (changefunc); 
  41. xmlHttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded');  
  42. xmlHttp.send(postData); 
  43. function autosave_post() 
  44.     var title=document.getElementById('title').value; 
  45.     var content = window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; 
  46.     var postTime=document.getElementById('postTime').value; 
  47.     if(allowajax==1) 
  48.     { 
  49.         content=postencode(content); 
  50.         title=postencode(title); 
  51.         var post="title="+title+"&content="+content+"&postTime="+postTime+""
  52.         var url="ajax.php?act=autosave"
  53.         makeSendData(post,url,'autosave','POST'); 
  54.     } 
  55. function autosave() 
  56.     if(xmlHttp.readyState == 4) 
  57.     { 
  58.         if(xmlHttp.status == 200) 
  59.         { 
  60.             var autoresponse=xmlHttp.responseText; 
  61.             var automessage=document.getElementById('autosavetimebox'); 
  62.             if(autoresponse.indexOf("<autosave_error>")!=-1) 
  63.             { 
  64.                 automessage.innerHTML='您还没有添写信息,不用保存草稿'
  65.                 return false; 
  66.             } 
  67.             if(autoresponse.indexOf("<autosave_ok>")!=-1) 
  68.             { 
  69.                 automessage.innerHTML='保存成功,您可以在发生意外的时候载入草稿'
  70.                 finddraft(); 
  71.             } 
  72.         } 
  73.     } 
  74. function finddraft() 
  75.     if(allowajax==1) 
  76.     { 
  77.         var url="ajax.php?act=loaddraft"
  78.         makeSendData(null,url,'loaddraft','POST'); 
  79.     } 
  80. function loaddraft() 
  81.     var draftbox=document.getElementById('draft'); 
  82.     if(xmlHttp.readyState < 4) 
  83.     { 
  84.         draftbox.innerHTML='草稿载入中...'
  85.     } 
  86.     if(xmlHttp.readyState == 4) 
  87.     { 
  88.         if(xmlHttp.status == 200) 
  89.         { 
  90.             draftbox.innerHTML=xmlHttp.responseText; 
  91.         } 
  92.     } 
  93. function cleardraft() 
  94.     if(allowajax==1) 
  95.     { 
  96.         var url="ajax.php?act=cleardraft"
  97.         makeSendData(null,url,'nodraft','POST'); 
  98.     } 
  99. function nodraft() 
  100.     var draftbox=document.getElementById('draft'); 
  101.     if(xmlHttp.readyState < 4) 
  102.     { 
  103.         draftbox.innerHTML='载入中...'
  104.     } 
  105.     if(xmlHttp.readyState == 4) 
  106.     { 
  107.         if(xmlHttp.status == 200) 
  108.         { 
  109.             draftbox.innerHTML=xmlHttp.responseText; 
  110.         } 
  111.     } 
  112. //encode string 
  113. function postencode (str) {  
  114.     str=encodeURIComponent(str); 
  115.     if (is_moz) str=str.replace(/%0A/g, "%0D%0A"); //from bob 
  116.     return str; 

自动保存的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. function startimer() 
  16.     var starttime=document.getElementById('autosavetimebox').innerHTML; 
  17.     if(starttime=='保存成功,您可以在发生意外的时候载入草稿' || starttime=='您还没有添写信息,不用保存草稿'
  18.     { 
  19.         starttime='60'
  20.     }else
  21.         starttime=starttime.replace('秒',''); 
  22.     } 
  23.     var autosavefunbox=document.getElementById('autosavefunbox'); 
  24.     autosavefunbox.innerHTML='<a href="javascript教程:" onClick="javascript:stoptimer()">停止计时</a>'
  25.     starttime==0 ? starttime=60 : starttime=starttime; 
  26.     autosavetime(starttime); 
  27. function stoptimer() 
  28.     var autosavefunbox=document.getElementById('autosavefunbox'); 
  29.     autosavefunbox.innerHTML='<a href="javascript:" onClick="javascript:startimer()">开始计时</a>'
  30.     clearTimeout(autosavetimer); 
  31. }

Tags: php+ajax php自动保存

分享到: