php+ajax实现文章自动保存的方法
2015-01-24信息快讯网
这篇文章主要介绍了php+ajax实现文章自动保存的方法,可实现文章内容的实时保存,防止突发情况下的数据丢失,是非常实用的技巧,需要的朋友可以参考下
本文实例讲述了php+ajax实现文章自动保存的方法。分享给大家供大家参考。具体分析如下:
php+ajax文章自动保存的方法主是要方便用户,提高用户体验,我们就是用ajax把数据保存一个临时数据,像csdn一样,他可以自动保存用户的数据,这样就是掉电,出现意外你编辑的数据都不人被丢失.
这是自动保存草稿的核心的一部分,
autosavetime(sec) 这个函数是用来开始计时的
clearTimeout(autosavetimer);清除定时器
document.getElementById('autosavetimebox').innerHTML=sec+"秒";取得页面中的autosavetimebox对像,并向其写入倒计时
if(sec>0) { autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000); //这里就是如果当sec>0的时候,第一秒执行一次autosavetime这个函数,同时会把sec-1的值写入autosavetimebox中 }else { var title=document.getElementById('title'); if(title.value!=''){ autosave_post(); }else{ document.getElementById('autosavetimebox').innerHTML='不用保存'; } }
这一部分,就是当sec>0的条件不成立,呵呵,就是sec<=0的时候,开始执行保存草稿,首先会判断文章的标题是否为空,如果不会为空,就执行autosave_post()这个函数,否则就写入‘不用保存'.
php代码如下:
var userAgent = navigator.userAgent.toLowerCase(); var is_opera = (userAgent.indexOf('opera') != -1); var is_saf = ((userAgent.indexOf('applewebkit') != -1) || (navigator.vendor == 'Apple Computer, Inc.')); var is_webtv = (userAgent.indexOf('webtv') != -1); var is_ie = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_saf) && (!is_webtv)); var is_ie4 = ((is_ie) && (userAgent.indexOf('msie 4.') != -1)); var is_moz = ((navigator.product == 'Gecko') && (!is_saf)); var is_kon = (userAgent.indexOf('konqueror') != -1); var is_ns = ((userAgent.indexOf('compatible') == -1) && (userAgent.indexOf('mozilla') != -1) && (!is_opera) && (!is_webtv) && (!is_saf)); var is_ns4 = ((is_ns) && (parseInt(navigator.appVersion) == 4)); var is_mac = (userAgent.indexOf('mac') != -1); if ((is_ie & !is_ie4) || is_moz || is_saf || is_opera) { var allowajax=1; }else{ var allowajax=0; } var xmlHttp = false; function makeSendData(postData,url,functionName,httptype) { var posturl=url; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } if (!xmlHttp) { alert('Cannot send an XMLHTTP request'); return false; } // 提交表单的方式 xmlHttp.open(httptype, posturl, true); // 当表单提交完成后触发一个事件 var changefunc="xmlHttp.onreadystatechange = "+functionName; ///////from bob eval (changefunc); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.send(postData); } function autosave_post() { var title=document.getElementById('title').value; var content = window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; var postTime=document.getElementById('postTime').value; if(allowajax==1) { content=postencode(content); title=postencode(title); var post="title="+title+"&content="+content+"&postTime="+postTime+""; var url="ajax.php?act=autosave"; makeSendData(post,url,'autosave','POST'); } } function autosave() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { var autoresponse=xmlHttp.responseText; var automessage=document.getElementById('autosavetimebox'); if(autoresponse.indexOf("<autosave_error>")!=-1) { automessage.innerHTML='您还没有添写信息,不用保存草稿'; return false; } if(autoresponse.indexOf("<autosave_ok>")!=-1) { automessage.innerHTML='保存成功,您可以在发生意外的时候载入草稿'; finddraft(); } } } } function finddraft() { if(allowajax==1) { var url="ajax.php?act=loaddraft"; makeSendData(null,url,'loaddraft','POST'); } } function loaddraft() { var draftbox=document.getElementById('draft'); if(xmlHttp.readyState < 4) { draftbox.innerHTML='草稿载入中...'; } if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { draftbox.innerHTML=xmlHttp.responseText; } } } function cleardraft() { if(allowajax==1) { var url="ajax.php?act=cleardraft"; makeSendData(null,url,'nodraft','POST'); } } function nodraft() { var draftbox=document.getElementById('draft'); if(xmlHttp.readyState < 4) { draftbox.innerHTML='载入中...'; } if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { draftbox.innerHTML=xmlHttp.responseText; } } } //encode string function postencode (str) { str=encodeURIComponent(str); if (is_moz) str=str.replace(/%0A/g, "%0D%0A"); //from bob return str; }
自动保存的js代码,代码如下:
var autosavetimer; function autosavetime(sec) { clearTimeout(autosavetimer); document.getElementById('autosavetimebox').innerHTML=sec+"秒"; if(sec>0) { autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000); }else { var blogtitle=document.getElementById('title'); if(blogtitle.value!=''){ autosave_post(); }else{ document.getElementById('autosavetimebox').innerHTML='不用保存'; } } } function startimer() { var starttime=document.getElementById('autosavetimebox').innerHTML; if(starttime=='保存成功,您可以在发生意外的时候载入草稿' || starttime=='您还没有添写信息,不用保存草稿') { starttime='60'; }else{ starttime=starttime.replace('秒',''); } var autosavefunbox=document.getElementById('autosavefunbox'); autosavefunbox.innerHTML='<a href="javascript教程:" onClick="javascript:stoptimer()">停止计时</a>'; starttime==0 ? starttime=60 : starttime=starttime; autosavetime(starttime); } function stoptimer() { var autosavefunbox=document.getElementById('autosavefunbox'); autosavefunbox.innerHTML='<a href="javascript:" onClick="javascript:startimer()">开始计时</a>'; clearTimeout(autosavetimer); }
希望本文所述对大家的php程序设计有所帮助。
php使用正则表达式获取图片url的方法
php使用CURL伪造IP和来源实例详解
php+mysql实现无限分类实例详解
php截取html字符串及自动补全html标签的方法
php在linux下检测mysql同步状态的方法
php模拟用户自动在qq空间发表文章的方法
php采集内容中带有图片地址的远程图片并保存的方法
php读取csv数据保存到数组的方法
19个Android常用工具类汇总
php实现监控varnish缓存服务器的状态
php在线解压ZIP文件的方法
php站内搜索关键词变亮的实现方法
php使用PDO操作MySQL数据库实例
浅谈php冒泡排序
php将图片保存入mysql数据库失败的解决方法
解决phpcms更换javascript的幻灯片代码调用图片问题
php+ajax实时输入自动搜索匹配的方法
php连接odbc数据源并保存与查询数据的方法
PHP+jquery+ajax实现即时聊天功能实例
PHP采集静态页面并把页面css,img,js保存的方法
ThinkPHP中使用ajax接收json数据的方法
ThinkPHP通过AJAX返回JSON的两种实现方法
php自定文件保存session的方法
thinkphp中ajax与php响应过程详解
Yii实现多按钮保存与提交的方法
php获取文章上一页与下一页的方法
php实现获取文章内容第一张图片的方法
完美实现wordpress禁止文章修订和自动保存的方法
thinkphp获取栏目和文章当前位置的方法
destoon文章模块调用企业会员资料的方法