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


Posted in PHP onDecember 30, 2014

本文实例讲述了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 相关文章推荐
无数据库的详细域名查询程序PHP版(1)
Oct 09 PHP
PHP 编写大型网站问题集
May 07 PHP
怎样使用php与jquery设置和读取cookies
Aug 08 PHP
php批量添加数据与批量更新数据的实现方法
Dec 16 PHP
PHP经典面试题集锦
Mar 19 PHP
php实现的通用图片处理类
Mar 24 PHP
php按单词截取字符串的方法
Apr 07 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
Dec 14 PHP
Zend Framework分页类用法详解
Mar 22 PHP
PHP编程实现csv文件导入mysql数据库的方法
Apr 29 PHP
Laravel 实现密码重置功能
Feb 23 PHP
Laravel5.4框架中视图共享数据的方法详解
Sep 05 PHP
php实现监控varnish缓存服务器的状态
Dec 30 #PHP
php在线解压ZIP文件的方法
Dec 30 #PHP
php站内搜索关键词变亮的实现方法
Dec 30 #PHP
php使用PDO操作MySQL数据库实例
Dec 30 #PHP
discuz目录文件资料汇总
Dec 30 #PHP
浅谈php冒泡排序
Dec 30 #PHP
制作安全性高的PHP网站的几个实用要点
Dec 30 #PHP
You might like
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Python工厂函数用法实例分析
2018/05/14 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python3实现字符串操作的实例代码
2019/04/16 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python利用faker库批量生成测试数据
2020/10/15 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
找工作最新求职信
2013/12/22 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
社团活动总结格式
2014/08/29 职场文书
营销总监岗位职责
2014/09/16 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
教师节主持词开场白
2015/05/29 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书