用jquery实现ajax-优快云博客

本文介绍了如何使用Java后端处理包含Date类型的数据并将其转换为JSON格式，以及前端JavaScript通过Ajax调用获取并显示这些数据的方法。重点讲解了处理日期类型的注意事项及数据展示的具体实现。

1. 首先是后台处理数据，将得到的list放入json中。

	List<CSiteBrief> sitesBrief = CsiteToBrief();

	JSONArray jo = JSONArray.fromObject(sitesBrief);
	String res = jo.toString();
	commonAjaxOutput(res);

其中当list中一个属性是Date类型时，不管是sql.date还是util.date都不能放入JSON中，会报错。其中commonAjaxOutput(res)就是讲Json数据输出到后台，具体代码如下：

private void commonAjaxOutput(String res) throws Exception {

		System.out.println(res);

		response.setCharacterEncoding("UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(res);
		pw.flush();
		pw.close();
	}

2. 前台用JavaScript来显示数据，

var option = {
			url: "ViewAllCsite.action", 
			//data:data,dataType:"json",
			 dataType:"json",
			success: function(res, textStatus){
				//
			/*	var ems = $("em");
				$(ems[0]).text(res.csiteCount);
				$(ems[1]).text(res.spotCount);*/
				//$("#usersNum").val();
				//alert(res);
				var con="";
				$.each(res, function(i, item) {
					//alert(i+item.name+item.id+item.addr+item.province_id+item.active);
					con+="<tr>";
					con+="<td>"+(i+1)+"</td>";
					con+="<td>"+item.id+"</td>";
					con+="<td>"+item.name+"</td>";
					con+="<td>"+item.addr+"</td>";
					con+="<td>"+item.province_id+"</td>";
					con+="<td>"+item.city_id+"</td>";
					con+="<td>"+item.district_id+"</td>";
					con+="<td>"+item.region_id+"</td>";
					con+="<td>"+item.constructor+"</td>";
					con+="<td>"+item.builder+"</td>";
					con+="<td>"+item.etpr_id+"</td>";
					con+="<td>"+item.ctc_name+"</td>";
					con+="<td>"+item.active+"</td>";
					con+="<td><a href=\"ViewCsiteDetail.action?siteID="+ item.id + "\">";
					con+="查看</a></td>";
					con+="<td><a href=\"ViewCsiteDetail.action?siteID="+ item.id + "\">";
					con+="修改</a></td>";
					con+="<td><a href=\"StopCsiteDetail.action?siteID="+ item.id + "\">";
					con+="停止</a></td>";
					con+="</tr>";
					
				});
				
				//先移除原有数据
				var entries = $("#table_overview tr");
				var i;
				
				for(i=1;i<entries.length;i++)
					$(entries[i]).remove();
				
				$("#table_overview").append(con);
				addSizeFrame();
			},
			error:function(res,textStatus){
				//alert(textStatus);
			}
		};
	$.ajax(option);

主要函数是$.ajax(),url是对数据进行处理的action，data是传入的参数，dataType是传回的参数，对传回数据进行处理的函数用success,出错的处理函数是err.