php ajax 保存登录,PHP+Ajax 自动保存功能 实现代码

今天需要增加一个功能，用户在写文章的时候，需要隔几秒或几分钟就需要把数据存入到Mysql数据库中，做一次自动保存，自动备份。

由于我用的是simditor富文本编辑器，以前也做过“Simditor自动保存”功能，但是，那个自动保存功能远远不能满足，因此，只好再用原生的PHP + JavaScript + Ajax 代码再重新写一下。

实现原理：

1、文章自动保存，肯定要先得到文章的ID，自动保存哪一篇文章内容？

2、文章自动保存，不可能让用户点击一次或刷新一下页面再保存对吧？必须用Ajax异步去自动实现。用户是不需要做任何操作的就可以完成自动保存功能。

3、文章自动保存，多少时间自动保存一次？这个时间应该是可以更改的，需要用上JS的setInterval()方法。

4、文章自动保存，只有当内容变化了，我们再执行自动保存数据，存入数据库对吧！如果内容无变化，就不应该存入数据库。如果不这样设计，如果一个用户打开了文章编辑页面后，写了几个文字后，用户离开了，页面没有关闭，光标还是闪烁状态，总不能一直ajax展示请求存数据库吧！因此我需要用上cookie来记录文章内容的长度以及比较。

前端代码

1、前端html代码

我这是为了要快速测试，因此我设置自动保存时间是3000毫秒，也就是3秒保存一次，我自己的业务后期会改为2分钟自动保存一次。

关于这个post_id也就是文章ID如何得到？有两种方案：

第一种，自动草稿功能，以我这为例子，只要用户在发表文章页面时，只要标题有输入内容后，就会ajax异步执行自动草稿功能，得到文章id，再写入post_id。而且只执行一次。

第二种，自动保存功能，用下面这个代码再做一些的修改，第一次自动保存的时候得到文章id，再写入post_id，虽然说有一些缺点，具体看自己的情况。

index.php

正文内容

//自动保存功能函数，默认每两分钟保存一次

function AutoSave() {

if(document.getElementById('post_id').value > 0){ //这是得到文章的ID，保存哪一篇文章？

if(getCookie('EditorLength') == editor.getValue().length){

console.log('不执行自动保存');

}else{

//console.log(getCookie('EditorLength')+'11111');

//console.log(editor.getValue().length+'22222');

document.cookie="EditorLength = " + editor.getValue().length;

console.log('开始自动保存，这里放 前端ajax请求代码 ，我把这里的代码放在下面的');

}

}

}

//获取 cookie 值的函数

function getCookie(cname)

{

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i

{

var c = ca[i].trim();

if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return false;

}

//开始执行自动保存功能，默认每两分钟保存一次

setInterval(AutoSave, 3000);

2、前端JavaScript ajax请求代码：

我用的是POST异步请求，如果想用GET请求，请自行更改。

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

console.log(xmlhttp.responseText);

}

};

var data = "title="+document.getElementById('title').value +"&alias="+document.getElementById('alias').value+"&category_id="+document.getElementById('category_id').value+"&mode=title"+"&token=<?php echo $get_token; ?>";

console.log(data);

xmlhttp.open("POST","<?php echo $HOMEURL.$ADMIN_ADDRESS;?>/ajax.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send(data);

后端代码

也就是俗话说的：后端ajax响应代码：

ajax.php

echo "写逻辑，判断，然后存入数据库，再给一个返回结果，例如：成功，失败或者不返回。";

php代码如何写我就不用多说了吧？最核心的部份已经解决了，剩下来的靠你们自己了。

注意：

还有很重要的一点，当文章内容发表成功后，最好是清理一下cookie['EditorLength']的值。