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

 <div class="layui-form-item layui-form-text">
     <label class="layui-form-label">正文内容</label>
       <div class="layui-input-block">
       <textarea name="contents" id="editor" ></textarea>

      </div>
 </div>
           //自动保存功能函数,默认每两分钟保存一次
           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<ca.length; i++)
               {
                   var c = ca[i].trim();
                   if (c.indexOf(name)==0) return c.substring(name.length,c.length);
               }
               return false;
           }

           //开始执行自动保存功能,默认每两分钟保存一次
           setInterval(AutoSave, 3000);
       </script>

 

2、前端JavaScript ajax请求代码

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

            <script type="text/javascript">
           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);
</script>

 

后端代码

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

 

ajax.php

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

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

 

注意:

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

    A+
发布日期:2021年04月03日 12:24:04  所属分类:PHP
最后更新时间:2021-04-03 12:32:59
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
C++基础入门到进阶视频教程
  • ¥ 498.0元
  • 市场价:498.0元
React.js视频教程:全新React.js16.12技术合集
  • ¥ 69.0元
  • 市场价:69.0元
PowerDesigner数据库设计与建模
  • ¥ 58元
  • 市场价:58元
Python数据分析与机器学习实战
  • ¥ 398.0元
  • 市场价:498.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: