JavaWeb使用ajax实现定时自动保存草稿功能

最新推荐文章于 2023-02-17 11:27:15 发布

田野上的风筝

最新推荐文章于 2023-02-17 11:27:15 发布

阅读量2.9k

点赞数 1

分类专栏： Java 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43100896/article/details/90611296

版权

Java 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

在Web程序开发中，难免有时候会遇到一些定时业务，如考试系统中的自动提交试卷、还有平时写博客时定时自动保存草稿的功能。在JavaWeb中也可以利用ajax技术来实现这定时自动保存草稿这一功能。

index.jsp关键代码

html代码

<body onLoad="selectBlog()" >!-- 加载时调用查询所有草稿方法-->

</table>

</tr> <tr>

</tr></table>

</form> </td>

</tr>

</table>

</body>

js关键代码篇幅有限所以就不贴出构建XMLHttpRequest对象以及请求方法的代码了，注意创建XMLHttpRequest对象时，应该考虑到浏览器的兼容性。不同的浏览器下创建XMLHttpRequest对象是不同的，大多数浏览器都支持 var xmlHttp = new XMLHttpRequest()这种写法，但IE6.0以下的浏览器创建XMLHttpRequest对象时写法有所不同，可以使用if来判断，也可以利用try catch语句来创建XMLHttpRequest对象以解决浏览器兼容性的问题，以此尽量兼容大部分浏览器。

//省略了对构造XMLHttpRequest对象并发送请求的代码……

var saveReq = false;

function autoSave(){//自动保存草稿

var title=document.getElementById("title").value;

var content=document.getElementById("content").value;

if(title!=""&&content!="") { //当文章标题及内容不为空时

var param = "title="+title+"&content="+content;//拼接参数

//调用Ajax请求方法

saveReq = httpRequest("post","<c:url value='/BlogServlet?type=autoSave'></c:url>",true,cbf_save,param);

} }

//提示信息回调函数

function cbf_save(){

if(saveReq.readyState == 4){ //双重判断当服务器响应结束时

if(saveReq.status == 200){ ///当服务器响应的状态码为200时(即响应成功)

//把提示信息显示出来

document.getElementById("tip").innerHTML = saveReq.responseText;

}}

}

var selectReq = false;

function selectBlog(){//查询所有的草稿

var param = "nocache="+new Date().getTime();

selectReq = httpRequest("get","drafts.jsp",true,cbf_select,param);

}

function cbf_select(){//回调函数

if(selectReq.readyState == 4){

if(selectReq.status == 200){

document.getElementById("draftBox").innerHTML = selectReq.responseText;

}}

}

var delay=1000*10*60; //定义延迟时间，1分钟

//使用JavaScript的window对象的setInterval方法执行指定函数

timer=window.setInterval(autoSave,delay); //每间隔1分钟调用autoSave方法

timer=window.setInterval(selectBlog,delay);//每间隔1分钟调用selectBlog方法

</script>

从上面代码可以看出利用ajax实现无刷新操作实现自动保存草稿功能。首先创建XMLHttpRequest对象并编写发送请求的方法，然后autoSave()方法调用ajax请求方法保存文章页面的信息，selectBlog()方法调用请求方法从数据库查询草稿信息并生成table(草稿列表)，并编写回调函数将结果输出在页面上。而使用JavaScript的Window对象的setInterval()方法实现每间距一定的时间就调用一次指定函数，这样就可以实现定时自动保存草稿的功能了。

drafts.jsp主要代码(作用:生成草稿列表)

调用数据层的查询方法(这里为了方便，所以直接在java脚本调用方法，其实这样并不规范)，返回List，遍历List动态生成table(用于显示草稿箱)，

<%List<Blog> list = ArticleDao.getInstance().selectAllblog(); %>

int i=0;

for(Blog blog:list){ %>

<tr>

<td height="27" align="left" title="<%=blog.getCreateTime()%> 自动保存草稿">

<input name="hContent" type="hidden" id="hContent<%=i%>" value="<%=blog.getContent()%>">

<a href="#" onclick="myform.title.value='<%=blog.getTitle()%>';myform.content.value=document.getElementById('hContent<%=i%>').value;"><%=blog.getTitle()%></a>

</td>

</tr>

<%i++;} %>

</table>

Servlet关键代码

自动保存方法()

public static void autoSave(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

String title = request.getParameter("title"); //获取文章标题

String content = request.getParameter("content"); //获取文章内容

title = URLEncoder.encode(title, "ISO-8859-1");//转换编码，否则乱码

title = URLDecoder.decode(title, "UTF-8");

content = URLEncoder.encode(content, "ISO-8859-1");

content = URLDecoder.decode(content, "UTF-8");

Blog blog = new Blog();

blog.setTitle(title); //保存标题

blog.setContent(content); //保存内容

Calendar c = Calendar.getInstance();//创建一个Calendar

String time= c.get(c.YEAR)+"-"+c.get(c.MONTH)+"-"+c.get(c.DAY_OF_MONTH)+" "+c.get(c.HOUR_OF_DAY)+":"+c.get(c.MINUTE)+":"+c.get(c.SECOND);

blog.setCreateTime(time);//设置保存时间

//获取到标题和内容后，(根据标题和内容查询表中是否有相同的，有就返回false)

boolean res = BlogDao.getInstance().getBlog(blog);

if(!res){ //如果不存在

//saveBlog方法是将当前的Blog对象保存到数据库中

boolean b= BlogDao.getInstance().saveBlog(blog);//调用saveBlog方法

if(b){

response.getWriter().print("文章内容已经自动保存到草稿箱!");

}else {

response.getWriter().print("文章内容自动保存失败!");

}

从上面代码可以看出，先设置请求和响应的编码，然后获取传过来的参数，获取到参数后，调用查询方法根据标题和内容判断是否该内容已经存在，如不存在就调用SaveBlog()方法保存，存在就不保存。

结果：

田野上的风筝

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb使用ajax实现定时自动保存草稿功能

在Web程序开发中，难免有时候会遇到一些定时业务，如考试系统中的自动提交试卷、还有平时写博客时定时自动保存草稿的功能。在JavaWeb中也可以利用ajax技术来实现这定时自动保存草稿这一功能。index.jsp关键代码html代码<body onLoad="selectBlog()" >!-- 加载时调用查询所有草稿方法--><table width="9...
复制链接

扫一扫

专栏目录