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

2017-10-26 19:50:56来源:CSDN作者:HappyCat108人点击

分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>index.jsp</title><script type="text/javascript" src="jq/jquery-1.8.0.js"></script></head><body>	<!-- 一个查询按钮触发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></body><script type="text/javascript"> /* 点击按钮触发 */ 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); } }</script></html>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台