Jquery+Json+ajax实现异步查询显示数据

html:

	<!-- 一个查询按钮触发ajax -->
				<input type="button" value="查询" onclick="query()" />
				<br />
				<table>
				   <thead>
				     <tr>
				       <td>菜名</td>
				       <td>价格</td>
				     </tr>
				  </thead>
				<!-- 用一个id就可以用Jquery操作表体 -->
				 <tbody id="t_body"></tbody>
				</table>

/* 点击按钮触发 */
function query() {
	//执行ajax
	ajaxFun();
}

/* ajax代码部分，从jquery帮助文档可直接拷贝 */
function ajaxFun() {
	//ajax执行体
	$.ajax({
		//提交方式
		type: "POST",
		//访问servleturl
		url: "query",
		//服务器成功返回结果后，会把结果保存到data中
		success: function(data) {
			//先把表体部分清空
			$("#t_body").empty();
			//eval获取返回的JSON对象集合
			var d = eval('(' + data + ')');
			//把数据显示到页面的方法
			showData(d);
		}
	});
}
/* 显示数据 */
function showData(d) {
	//循环遍历一边d
	for (var i = 0; i < d.length; i++) {
		var html = "<tr><td>" + d[i].name + "</td><td>" + d[i].price +
			"</td></tr>";
		//通过表体id把显示文本显示到网页中
		$("#t_body").append(html);
	}
}