当前位置:  编程技术>java/j2ee

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

    来源: 互联网  发布时间:2014-10-16

    本文导语:  一、表单部分 (index.html)     首先是表单填写页面,用一个ID为AutoSaveMsg的DIV来显示返回信息,并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存,然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要...

一、表单部分 (index.html)

    首先是表单填写页面,用一个ID为AutoSaveMsg的DIV来显示返回信息,并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存,然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要,加上用户名,每个用户的草稿分开保存。为了说明方便,这里把一些修饰性的东西去掉,这样看起来比较明了

AJAX应用之草稿自动保存



用户名:
     



自动保存?


内容:
你编辑的内容将被自动保存,以便恢复




  







|





二、自动保存代码(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|rn]*|[n|rn]*$/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,用于在后台保存草稿:
  程序代码:







四、AJAX类(ajaxrequest.js)请下载。 


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery.ajax 用户登录验证的代码
  • jQuery Ajax($.ajax、$.post、$.get)实例代码
  • jquery的ajax简单结构示例代码
  • jquery Ajax 实现加载数据前动画效果的示例代码
  • Jquery、Ajax、Struts2定时刷新功能的实现代码
  • jquery ajax 登录验证的代码
  • S2SH整合JQuery+Ajax实现登录验证的代码
  • ajax jquery 页面局部刷新的不同实现代码
  • JQuery与Ajax调用新浪API获取短网址的代码
  • Jquery ajax无刷新翻页的实现代码
  • ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
  • JQuery+Ajax无刷新分页的实例代码
  • JQuery处理json与ajax返回JSON实例代码
  • jquery ajax jsonp跨域调用实例代码
  • jQuery+Ajax模拟用户登录功能的实现代码
  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
  • JSP + ajax实现输入框自动补全功能 实例代码
  • ASP.NET之 Ajax相关知识介绍及组件图 iis7站长之家
  • ASP.NET之 Ajax相关知识介绍及组件图
  • Ajax投票程序 Ajax Poll
  • Ajax 框架 Clean AJAX
  • Ajax 框架 Spry framework for Ajax
  • AJAX UI 创建工具 Sigma Ajax UI builder
  • Ajax 框架 Microsoft AJAX Library
  • Ajax 工具包 OpenLink AJAX Toolkit
  • AJAX框架 Ajax Agent
  • 基于 Ajax 的Web聊天软件 Ajax Chat
  • AJAX Libraries API
  • SharePoint AJAX Toolkit
  • Web动画开发工具包 AJAX Animator
  • Rich组件框架 Ajax4JSF


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3