Ajax实现自动保存草稿

大家在百度贴吧发帖子的时候应该看到了，当我们帖子写了一半，但是没有发表的时候，右下角出现了一个“* 内容已保存，最近保存时间：2019-06-01 16:46:43”。有时候我们不小心刷新了页面，本以为好不容易写的帖子都没了的时候，却发现它还在文本域里。

这里就用到了ajax技术，在页面不刷新的前提下将请求提交并接收返回值。
我模仿贴吧做了一个页面，大致就是这个样子

那么实现这个功能，我们还需要用到window对象的setInterval()方法，来指定提交保存草稿的时间间隔

setInterval(function(){
	var textTitle = $("#textTitle").val();
	var textContent = $("#textContent").val();
	//先判断帖子标题和内容有没有值，有的话就提交保存草稿
	if(textContent!=""||textTitle!=""){
		$.ajax({
			type:"post",//type：请求的类型
											 url:"${ctx}/servlet/UserServlet?fun=ajaxText",//url：请求的路径
			async:true,//是否自动提交
			data:{//data：请求的参数
				'textTitle':textTitle,
				'textContent':textContent
			},
			dataType:"text"	//数据类型				
		});
	}
	getText();//调用查询草稿的方法
},90000);//设置计时器，每90秒执行一次

提交到数据库之后，就对它进行查询，如果帖子内容有值，就不对其进行赋值。

function getText(){
	var textTitle = $("#textTitle").val();
	var textContent = $("#textContent").val();
	$.ajax({
		type:"post",
		url:"${ctx}/servlet/UserServlet?fun=findText",
		async:true,
		dataType:"json",
		success:function(data){
			if(data!=null){
				//如果帖子内容为空，就对其进行赋值
				if(textTitle==""){
					$("#textTitle").val(data.textTitle);
				}if(textContent==""){
					$("#textContent").val(data.textContent);
				}
				//对保存时间进行赋值
				$("#saveDate").html("* 内容已保存，最近保存时间："+data.saveDate);
			}
		}
	});
}

最后在页面初始化的时候调用一下查询草稿的方法，防止不小心刷新页面而导致帖子内容丢失

$(function(){
	getText();
});