Ajax 异步显示订单详情总结

实现效果：点击订单详情的时候，异步加载商品信息

 

<script type="text/javascript">
	$(function(){
		$(".orderDetailInfoBtn").click(function(){
			
			//获取按钮值
			//之前写成  var btnVal = $(".orderDetailInfoBtn").val();  获取到的是第一个按钮的值
			var btnVal = $(this).val();
			 var $table = $(this).next();
			if(btnVal == "订单详情"){
				//如果为‘订单详情’，发送ajax请求  
				var url = "/store/AdminOrderServlet";
				var oid = $(this).attr("id");
				var params = {"method":"findOrderByOidWithAjax","oid":oid};
				
				var content = "<tr><th>图片</th><th>名称</th><th>价格</th></tr>";
				$.post(url,params,function(data,status){
				   
				   $table.html("");
				   //这里之前写成  $(data).each(function(index,element){}) 报错 因为后台返回的类型是application/json，前端打印返回的数据为两个对象。如果后台返回的不是json对象，前台打印返回的数据如果是DOM结构的数据，就能用该方法
				   //$(selector).each(function(index,element)) 为每个匹配元素规定要运行的函数
                   //$.each( object, callback )  用于遍历指定的对象和数组
					$.each(data,function(index,element){
						content += "<tr><td><img src='"+element.product.pimage+"' width='50px'></img></td>"
						+"<td>"+element.product.pname+"</td><td>"+element.total+"</td></tr>";
						
					}); 
					$table.append(content);
				},"json");//如果此处没有写明 json ，那么解析时候就会报错
				
				//按钮名称变为 ‘关闭’
				$(this).val("关闭");
			}else{
			   //如果按钮值为 ‘关闭’，清空内容
			   $table.html("");
			    //按钮名称变成‘订单详情’
			    $(this).val("订单详情");
			}
			    
			    
			    
		});
	});
</script>

public  String findOrderByOidWithAjax (HttpServletRequest request, HttpServletResponse response) throws Exception {
		
		String oid = request.getParameter("oid");
		Order order = service.findOrderByOid(oid);
		
		List<OrderItem> list = order.getList();
		JSONArray json = JSONArray.fromObject(list);
		
		//中文乱码 设置 charset=GBK
		response.setContentType("application/josn;charset=GBK");
		response.getWriter().write(json.toString());
		
		return null;
	}