Auto-save is often used in editors. To achieve scheduled data saving, we will use the ajax function. Let’s look at an example of an input box losing focus and automatically saving data in the input box.
I recently made an input box. The function of automatically saving data when losing focus is of course the jQuery selector selecting input and blur. Ajax submits the data to the php file, and the php file saves the data. The main thing is to pay attention to the Chinese problem, so the encoding needs to be changed in the middle.
The example below is a list page, a bit similar to excel.
html code:
The code is as follows |
Copy code |
|
js code:
代码如下 |
复制代码 |
function Dd(i) {return document.getElementById(i);}
function ajaxEdit(aid,field){
var value = decodeURI(Dd(field+”_”+aid).value);
$.ajax({
type: “POST”,
url: “edit.php”,
data: {dopost:”ajaxSave”,aid:aid,field:field,value:value},
success: function(data){
if(data==”true”){//更新成功
Dd(field+”_”+aid).style.border=”#fff”;
}else{//更新失败
alert(“更新失败,可能是网速太慢”);
}
}
});
}
|
The code is as follows |
Copy code |
代码如下 |
复制代码 |
if($dopost==’ajaxSave’)
{
$value = urldecode(AutoCharset($value,”UTF-8″,”GB2312″));
//更新主表
$inQuery = “UPDATE `dede_archives` SET $field=’$value’ WHERE id=’$aid’”;
if($dsql->ExecuteNoneQuery($inQuery))
{
echo “true” ;
exit;
}else{
echo “false”;
exit;
}
}
|
function Dd(i) {return document.getElementById(i);}
function ajaxEdit(aid,field){
var value = decodeURI(Dd(field+”_”+aid).value);
$.ajax({
type: “POST”,
url: “edit.php”,
data: {dopost:”ajaxSave”,aid:aid,field:field,value:value},
success: function(data){
if(data==”true”){//Update successful
Dd(field+”_”+aid).style.border=”#fff”;
}else{//Update failed
alert("Update failed, maybe the network speed is too slow");
}
}
});
}
|
php code: (referring to functions and methods of dedecms)
The code is as follows |
Copy code |
if($dopost==’ajaxSave’)
{
$value = urldecode(AutoCharset($value,”UTF-8″,”GB2312″));
//Update main table
$inQuery = “UPDATE `dede_archives` SET $field=’$value’ WHERE id=’$aid’”;
if($dsql->ExecuteNoneQuery($inQuery))
{
echo “true” ;
exit;
}else{
echo “false”;
exit;
}
}
|
Method 2: Save drafts regularly to prevent accidental data loss!
Introduction, the website background editor uses Baidu UEditor WYSIWYG editor. We want to automatically save the content in the editor regularly.
The editor is called as follows:
The code is as follows
|
Copy code
|
代码如下 |
复制代码 |
/*注意: 本js脚本请在网页源代码最后的地方放置*/
if(!window.localStorage){
alert('您的浏览器不支持 localStorage 技术!');
}else{
var spanObj = document.getElementById('s1');
var saveTimer= setInterval(function(){
var str="";
if(document.all){/*IE*/ str=document.frames[1].document.body.innerHTML; }
else{/*Chrome,ff*/ str=document.getElementById("ueditor_0").contentDocument.body.innerHTML; }
if(str.length>20 && (str.indexOf("。")>-1 || str.indexOf(",")>-1)){ /*有内容才保存 且有句号或逗号*/
localStorage.setItem("ctValue", str);
var d = new Date();
var YMDHMS = d.getFullYear() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
spanObj.innerText='(数据保存于: '+YMDHMS+')';
setTimeout(function(){ spanObj.innerText=''; },5000);
}
},25000); //每隔N秒保存一次
function stoplocs(){
clearInterval(saveTimer); //停止保存
//localStorage.removeItem("ctValue"); //清空
}
function showlocs(){
var html = localStorage.getItem("ctValue");
editor.setContent(html);
//alert(localStorage.getItem("ctValue"));
}
}
|
Add the js call tag at the end of the publishing page or editing page:
The code is as follows
|
Copy code
|
|
The code of localStorag.js is as follows:
The code is as follows
|
Copy code
|
/*Note: Please place this js script at the end of the web page source code*/
if(!window.localStorage){
alert('Your browser does not support localStorage technology!');
}else{
var spanObj = document.getElementById('s1');
var saveTimer= setInterval(function(){
var str="";
if(document.all){/*IE*/ str=document.frames[1].document.body.innerHTML; }
else{/*Chrome,ff*/ str=document.getElementById("ueditor_0").contentDocument.body.innerHTML; }
if(str.length>20 && (str.indexOf(".")>-1 || str.indexOf(",")>-1)){ /*Save only if there is content and there is a period or comma* /
localStorage.setItem("ctValue", str);
var d = new Date();
var YMDHMS = d.getFullYear() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes( ) + ":" + d.getSeconds();
spanObj.innerText='(data saved in: '+YMDHMS+')';
setTimeout(function(){ spanObj.innerText=''; },5000);
}
},25000); //Save every N seconds
function stoplocs(){
clearInterval(saveTimer); //Stop saving
//localStorage.removeItem("ctValue"); //Clear
}
function showlocs(){
var html = localStorage.getItem("ctValue");
editor.setContent(html);
//alert(localStorage.getItem("ctValue"));
}
}
You can add a stop saving button or an immediate resume button, as follows:
The code is as follows
|
Copy code
|
Stop saving
Restore now
Okay, now your website publishing page/editing page has the auto-save function. Note that this method supports IE8 and above versions of IE, CHROME, Firefox and most other mainstream browsers. As for IE6, it is really outdated and is not considered. If you must consider IE6, please use the IE6/ie7 compatibility solution provided above.
http://www.bkjia.com/PHPjc/632717.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/632717.htmlTechArticleAutomatic saving is often used in editors. To achieve scheduled data saving, we will use the ajax function. Let’s go over it again. It seems that an input box loses focus and automatically saves the data of the input box...
|
|
|
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn