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);
}
}