Home > Article > Backend Development > PHP+ajax article automatic saving code example method_PHP tutorial
The php+ajax article automatic saving code example method is mainly to facilitate users and improve user experience. We use ajax to save the data into a temporary data. Like csdn, it can automatically save the user's data. This will cause a power outage. Appear Unexpectedly, none of the data you edited will be lost.
This is part of the core of automatically saving drafts,
autosavetime(sec) This function is used to start timing
clearTimeout(autosavetimer); clear the timer
document.getElementById('autosavetimebox') .innerHTML=sec+"seconds"; Get the autosavetimebox object in the page and write the countdown to it
if(sec>0) {
autosavetimer = setTimeout("autosavetime("+sec+”- 1)",1000);
//Here is if sec>0, the autosavetime function will be executed once in the first second, and the value of sec-1 will be written into the autosavetimebox
}else {
var title=document.getElementById('title');
if(title.value!=''){
autosave_post();
}else{
document.getElementById('autosavetimebox ').innerHTML='No need to save';
}
This part is when the condition of sec>0 is not established, haha, when sec<=0, the execution of saving the draft
will be judged first. Whether the title is empty, if not, execute the autosave_post() function, otherwise write 'no need to save'
}
php tutorial code
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;
}// How to submit the form
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("")!=-1)
{
automessage.innerHTML='您还没有添写信息,不用保存草稿';
return false;
}
if(autoresponse.indexOf("")!=-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;
}
Auto-save js code
var autosavetimer;
function autosavetime(sec) {
clearTimeout (autosavetimer);
document.getElementById('autosavetimebox').innerHTML=sec+"seconds";
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='No need to save'; =document.getElementById('autosavetimebox').innerHTML;
if(starttime=='Save successfully, you can load the draft when an accident occurs' || starttime=='You have not added information yet, no need to save Draft')
{
starttime='60';
}else{
starttime.replace('seconds','');
}
var autosavefunbox=document .getElementById('autosavefunbox');
autosavefunbox.innerHTML='Stop timing';
starttime ==0 ? starttime=60 : starttime=starttime;
autosavetime(starttime);
}
function stoptimer()
{
var autosavefunbox=document.getElementById('autosavefunbox');
autosavefunbox.innerHTML='Start timing';
clearTimeout(autosavetimer);
}
php+ajax article automatic saving code example method is mainly to facilitate users and improve user experience. We just use ajax to save the data as temporary data. Like csdn, it can automatically save the user's data. , this is a power outage. If there is an accident, all the data you edited will be lost.
http://www.bkjia.com/PHPjc/444937.html
www.bkjia.comtrue