ajax动态更换局部块

<pre name="code" class="html"><script src="${ctxStatic}/site/js/jquery_1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/js/jquery.form-3.51.min.js"></script>

1.js

function order(obj){
	$.ajax({
		url: obj,type: "GET",success: function(data) {
			
			var promoteList = data.success.list;
			$("#promoteList").html("");
            var promoteListHtml = $("#promoteList");

			var html = '<li><a href="{1}"><div class="pic">'+
				'<img src="{2}"><i></i><div class="sytime"><b></b>剩余时间：{3}<span>立即抢购</span></div>'+
				'</div><div class="txt"><p>{4}</p><p><b class="red fontz20">￥{5}</b>'+
				'</p></div></a></li>';
				
			for(var i in promoteList){
                var promote = promoteList[i];
                var li = html;
                li = li.replace("{1}","${ctxPath}/site/promotion/promoteDetailedMH");
                li = li.replace("{2}","");
                li = li.replace("{3}","2小时6分58秒");
                li = li.replace("{4}",promote.name);
                li = li.replace("{5}",promote.price);

                promoteListHtml.append(li);

            }
		},error: function(jqXHR,status,error){
			alert("数据提取失败，请稍后重试或联系管理员！");
		}
	});
}

2.替换的模块

<ul id="promoteList">
 <c:forEach items='${page.list}' var='promote' varStatus='status'>
     <li>
 	<a href='${ctxPath}/site/promotion/promoteDetailedMH'>
  	<div class='pic'>
  		<img src=''><i></i><div class="sytime"><b></b>剩余时间：2小时6分58秒<span>立即抢购</span></div>
  	</div>
  	<div class='txt'><p>${promote.name}</p>
   	    <p>
    	        <b class='red fontz20'>￥${promote.price}</b>
            </p>
	</div>
	</a>
     </li>
</c:forEach>
</ul>

3.后台返回的json

 @RequestMapping(value = "/orderPromote-{itemTypeId}",method = RequestMethod.GET)
    public String promoteJson(@PathVariable long itemTypeId,Model model,HttpServletRequest request,HttpServletResponse response){
        Map<String,Object> jsonMap = new HashMap<String,Object>();

    	/**
    	 * 排序方式
    	 */
		String orderBy = request.getParameter("orderBy");
		if(StringUtils.isBlank(orderBy))orderBy = "name";
		
    	/**
    	 * 特价信息
    	 */
		Item item = new Item();
		List<Item> itemList = itemService.findOnShelfByTypeId(itemTypeId,item,null);
		long[] itemIds = new long[itemList.size()];
		for(int i=0;i<itemList.size();i++){
			itemIds[i] = itemList.get(i).getId();
		}
		Page<Promote> page = promoteService.getPromoteListByItemIds(orderBy,itemIds);
    	model.addAttribute("page",page);
    	
    	/**
    	 * 热销榜
    	 */
		Page<Promote> pageSalesVolume = promoteService.getPromoteListByItemIds("remain",itemIds);
		List<Promote> listSalesVolume = pageSalesVolume.getList();
    	model.addAttribute("listSalesVolume",listSalesVolume);
    	
		try {
	        jsonMap.put("success",page);
			response.reset();
	        response.setContentType("application/json");
	        response.setCharacterEncoding("utf-8");
			response.getWriter().print(JsonMapper.toJsonString(jsonMap));
		} catch (IOException e) {
			e.printstacktrace();
		}
        return null;
    	
    	
    }
    

原文地址：https://www.jb51.cc/ajax/162461.html