这个要比最原始的ajax更好使用,就像殊途同归一样,用Jqery版的ajax用很短的代码就可以完成同样的任务:
在我的这个blog的项目中,因为我的后台管理为了懒省事,它的大部分操作都是使用ajax异步刷新完成的
现在为了演示如何使用jquery版的ajax,演示下点击文章操作后和删除某一篇博客的ajax请求
核心代码:
<table class="am-table am-table-striped am-table-hover table-main"> <thead> <tr> <th class="table-check"><input type="checkbox" /></th> <th class="table-id">ID</th> <th class="table-title">说说</th> <th class="table-date">发布日期</th> <th class="table-set">操作</th> </tr> </thead> <tbody id="moodLogOperation_tbody"> </tbody> </table>
/** * 文章操作 * author:盼盼 * @returns */ $("#articleOperation").click(function(){ $.ajax({ type:"post", url:"Blog/blog/article_findAllArticle.action", dataType:"json", success:function(data){ console.log(data) $("#acticleOperation_tbody").html(" "); $.each(data,function(key,value){ var prebody=$("#acticleOperation_tbody").html(); $("#acticleOperation_tbody").html(prebody+'<tr>' +'<td><input type="checkbox" /></td>' +'<td>'+value.id+'</td>' +'<td><a href="#">'+value.title+'</a></td>' +'<td>'+value.joinTime+'</td>' +'<td>' +' <div class="am-btn-toolbar">' +' <div class="am-btn-group am-btn-group-xs">' +' <button ' +' class="am-btn am-btn-default am-btn-xs am-text-secondary">' +' <span class="am-icon-pencil-square-o"></span> 编辑' +' </button>' +' <button class="am-btn am-btn-default am-btn-xs">' +' <span class="am-icon-copy"></span> 复制' +' </button>' +' <button onclick="articleDelete('+value.id+')" ' +' class="am-btn am-btn-default am-btn-xs am-text-danger" >' +' <span class="am-icon-trash-o"></span> 删除' +' </button>' +' </div>' +' </div>' +'</td>' +'</tr>'); }) }, error:function(jqObj){ console.log(jqObj.status) } }); });
action:
/** * 博客查看 * * @return * @throws IOException */ public String findAllArticle() throws IOException { List<Article> list = articleService.findAll(); // 获取一个response HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); if (list != null) { String jsonString = JSONArray.toJSONString(list); // 获取print对象 PrintWriter out = response.getWriter(); System.out.println("json:" + jsonString); out.print(jsonString); out.flush(); out.close(); } return null; }
点击删除的核心代码:
/** 文章操作_删除 * @returns */ function articleDelete(id){ $.ajax({ type:"post", url:"Blog/blog/article_delete.action", data:"id="+id, dataType:"json", success:function(data){ alert(data.msg); console.log(data) }, error:function(jqObj){ console.log(jqObj.status) alert("Jquery失败哦"); } }); }
action:
/** * 博客删除 * * @return * @throws IOException */ public String delete() throws IOException { HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); Article article = new Article(); article.setId(id); JSONObject str = new JSONObject(); try { articleService.deleteArticle(article); str.put("msg","删除成功~"); }catch (Exception e) { e.printStackTrace(); str.put("msg","删除失败了稍后重试哦~"); }finally { out.print(str); out.flush(); out.close(); //System.out.println(str); } return null; }