用ajax实现局部刷新

项目使用springmvc做的。

点击左侧二级栏目，局部刷新右侧内容。

		<div class="list fl">
			<ul class="one">
				<c:forEach items="${category2s }" var="category">
					<li><a href="list.html">${category.key }</a>
						<ul class="two">
							<c:forEach items="${category.value }" var="c">
								<li>
								<a class="cate">${c.name }<span style="display:none">${c.id }</span></a>			
								</li>
							</c:forEach>
						</ul>
					</li>
				</c:forEach>
			</ul>
		</div>

		<div class="book-wrap fr">
			<div class="book clearfix booo">
						<c:forEach items="${books }" var="book">
						<dl>
							<dt>
								<a href="${pageContext.request.contextPath }/system/detail/${book.id}">
									<img src="${pageContext.request.contextPath }${book.resource.url }" alt=""/>
								</a>
							</dt>
							<dd>
								<p><a href="${pageContext.request.contextPath }/system/detail/${book.id}">${book.name }</a></p>
								<p>数量：${book.totalNum }</p>
								<p><s>价格：￥${book.oldPrice }</s> ￥${book.outPrice }</p>
							</dd>
						</dl>
						</c:forEach>
				
			</div>
		</div>

//点击了二级标签category2则进行局部刷新。
$(function(){
	$(".cate").click(function(){
		var categoryId = $(this).children("span").text();//此处获取到分类2的id
		console.log(categoryId);
		
		$.ajax({
			type:'post',
			contentType : "application/x-www-form-urlencoded; charset=utf-8",
			url : 'system/category',
			data: {"categoryId":categoryId},
			success : function(data) {
				console.log("======data=====");
				console.log(data);
				var jsonb = eval(data);
				console.log("======jsonb=====");
				console.log(jsonb);
				$(".booo").html("");
				var str = "";
				$.each(jsonb, function (index, item){
					console.log(item.oldPrice);
					console.log(item.oldPrice.toFixed(2));
					str += "<dl><dt><a href='/bookproject/system/detail/"+item.id+"'>" +
							"<img src='/bookproject/"+item.resource+"'/>" +
							"</a></dt><dd><p><a href='/bookproject/system/detail/"+item.id+"'>"+item.name+"</a></p>" +
							"<p>数量："+item.totalNum+"</p><p><s>价格：￥"+item.oldPrice.toFixed(2)+"</s> ￥"+item.outPrice.toFixed(2)+"</p></dd></dl>";						
					});
				$(".booo").html(str);
				
			}
		});
	});
});

	@RequestMapping(value="/category", produces = "application/json; charset=utf-8")
	@ResponseBody
	public String category(@RequestParam String categoryId){
		//获取所有的分类
		int cId = Integer.parseInt(categoryId);
		System.out.println("cate=="+categoryId);

		//获取category2下的id。
		Category2 category2 = category2DAO.findCategory2ById(cId);
		System.out.println(category2);
		Set<Book> books = category2.getBooks();
		System.out.println(books);
		JSONArray array = new JSONArray();
		for(Book book: books) {
			JSONObject obj = new JSONObject();
			obj.put("name", book.getName());
			obj.put("id", book.getId());
			obj.put("resource", book.getResource().getUrl());
			obj.put("totalNum", book.getTotalNum());
			obj.put("oldPrice", book.getOldPrice());
			obj.put("outPrice", book.getOutPrice());
			System.out.println("obj=="+obj);
			array.add(obj);
		}
		
		return array.toString();
	}

Control层打印，少部分截图。

浏览器打印。

outPrice为浮点型，json解析后多了好多位，我用item.outPrice.toFixed(2)处理的。