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

JQery版的AJAX应用

程序员文章站 2022-04-28 21:27:22
...

这个要比最原始的ajax更好使用,就像殊途同归一样,用Jqery版的ajax用很短的代码就可以完成同样的任务:

在我的这个blog的项目中,因为我的后台管理为了懒省事,它的大部分操作都是使用ajax异步刷新完成的

现在为了演示如何使用jquery版的ajax,演示下点击文章操作后和删除某一篇博客的ajax请求

JQery版的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;
	}