一、表单部分 ()
首先是表单填写页面，用一个id为autosavemsg的div来显示返回信息，并且用一个id为draft_autosave的checkbox来确定是否进行自动保存，然后将textarea的id命名为message。同时为了应对多用户同时使用的需要，加上用户名，每个用户的草稿分开保存。为了说明方便，这里把一些修饰性的东西去掉，这样看起来比较明了
<h2>ajax应用之草稿自动保存</h2><br />
<!-- 用户名默认为noname -->
用户名：
<input type="text" name="memname" id="memname"
size="20" value="noname" disabled="true" />
<!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 -->
<input onclick="setautosave();" type="checkbox" id="draft_autosave" value="1" checked="true" />自动保存？
<br /><br />
内容：
<textarea cols=40 rows=8 id="message">你编辑的内容将被自动保存,以便恢复</textarea><br /><br />
<!-- autosavemsg显示返回信息 -->
<div id="autosavemsg"></div><br />
<input type="submit" onclick="save();" value="save" />
<!-- 调用函数恢复最后保存的草稿 -->
<input type="button" onclick="autosaverestore();" value="restore" />
</div>
</div>
<!-- 将js代码放在所有对象之后，以免在页面未加载完成时出现对象不存在的错误 -->
|<!-- ajax类 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 自动保存代码 -->
<script type="text/javascript" src="autosave.js"></script>
二、自动保存代码(autosave.jsp)：
// 首先设置全局变量
// 要保存的内容对象formcontent
var formcontent;
// 显示返回信息的对象
var autosavemsg=document.getelementbyid("autosavemsg");
// 用户名
var memname=document.getelementbyid("memname").value;
// 自动保存时间间隔
var autosavetime=10000;
// 计时器对象
var autosavetimer;
// 首先设置一次自动保存状态
setautosave();
// 自动保存函数
function autosave() {
formcontent=document.getelementbyid("message");
// 如果内容或用户名为空，则不进行处理，直接返回
if(!formcontent.value||!memname) return;
// 创建ajaxrequest对象
var ajaxobj=new ajaxrequest;
ajaxobj.url="autosave.jsp";
ajaxobj.content="action=autosave&memname="+memname+"&postcontent="+formcontent.value;
ajaxobj.callback=function(xmlobj) {
// 显示反馈信息
autosavemsg.innerhtml=xmlobj.responsetext;
}
ajaxobj.send();
}
// 设置自动保存状态函数
function setautosave() {
// 是否自动保存？
if(document.getelementbyid("draft_autosave").checked==true)
// 是，设置计时器
autosavetimer=setinterval("autosave()",autosavetime);
else
// 否，清除计时器
clearinterval(autosavetimer);
}
function autosaverestore() {// 恢复最后保存的草稿
autosavemsg.innerhtml="正在恢复，请稍候……"
formcontent=document.getelementbyid("message");
// 如果用户名为空，则不进行处理，直接返回
if(!memname) return;
// 创建ajaxrequest对象
var ajaxobj=new ajaxrequest;
ajaxobj.url="autosave.jsp";
ajaxobj.content="action=restore&memname="+memname;
ajaxobj.callback=function(xmlobj) {
// 显示反馈信息
if(xmlobj.responsetext!="") {
// 恢复草稿
var s=xmlobj.responsetext.replace(/^[\n|\r\n]*|[\n|\r\n]*$/g,'');//去掉首尾空行
formcontent.innertext=s;
// 提示用户恢复成功
autosavemsg.innerhtml="恢复成功";
}
}
ajaxobj.send();
}
function save() {//将内容保存至数据库,没有完成.
formcontent=document.getelementbyid("message");
// 如果内容或用户名为空，则不进行处理，直接返回
if(!formcontent.value||!memname) return;
// 创建ajaxrequest对象
var ajaxobj=new ajaxrequest;
ajaxobj.url="autosave.jsp";
ajaxobj.content="action=save&memname="+memname+"&postcontent="+formcontent.value;
ajaxobj.callback=function(xmlobj) {
// 显示反馈信息
autosavemsg.innerhtml=xmlobj.responsetext;
}
ajaxobj.send();
}
三、 最后是autosave.jsp，用于在后台保存草稿：
程序代码：
<%@ page contenttype="text/html; charset=gb2312" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
string postcontent,memname,action;
string filename;
file f;
filewriter fw;
action=request.getparameter("action");//获取操作，是保存草稿还是恢复草稿
//获取用户名
memname=request.getparameter("memname");
//获取草稿内容
postcontent=request.getparameter("postcontent");
filename=memname+".txt";//保存草稿的文件
filename= request.getrealpath("/temp/"+filename);
if(action.equals("save")||action.equals("autosave")){ //这里两个动作合并了,保存到数据库的代码没有写
f = new file(filename);
if(!f.exists())//如果文件不存，则建立
{
f.createnewfile();
}
fw = new filewriter(filename); //建立filewrite对象,并设定由fw对象变量引用
postcontent=new string(postcontent.getbytes("iso8859_1"),"utf-8");
fw.write(postcontent);
fw.close(); //关闭文件
out.println("最后于"+new date().tostring()+"自动保存成功!!1");
}else if(action.equals("restore")){//恢复操作
filereader fr = new filereader(filename); //建立filereader对象,并设定由fr对象变量引用
bufferedreader br = new bufferedreader(fr); //建立bufferedreader对象,并设定由br对象变量引
stringbuffer bf=new stringbuffer();
string line;
while((line = br.readline())!=null){ //读取一行数据
bf.append(line+"\n");
}
out.print(bf.tostring().trim());
}else{
out.println(" 发生错误");
}
%>
四、ajax类（ajaxrequest.js）请下载。
如对本文有疑问，
点击进行留言回复！！
![[杭电多校2020]第一场 1004 Distinct Sub-palindromes](http://www.lhsxpumps.com/_images5/10qianwan/20200724/s_0_202007241733388592.png)
我要评论
网友评论