JQery版的AJAX应用

这个要比最原始的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;
	}