欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax+jsp草稿自动保存的实现代码

程序员文章站 2024-02-21 11:07:22
一、表单部分 (index.html)     首先是表单填写页面,用一个id为autosavemsg的div来显示返回信...
一、表单部分 (index.html)

    首先是表单填写页面,用一个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)请下载。