jsp动态刷新表格

   前台提交数据之后，想要不刷新整个页面，就可以使页面上的表格显示出最新提交的数据，这时我们可以采用ajax传递接收数据，并通过拼接html语句的方法将数据显示到页面上。

<div class="accordion-inner">
        <table class="table table-striped table-hover">
				<thead>
						<tr>
								<td>景点id</td>
								<td>景点名称</td>
								<td>推荐指数</td>
								<td>门票价格</td>
								<td>地址</td>
								<td>联系电话</td>
								<td>操作</td>
					   </tr>
			   </thead>
				<tbody id="scenic-information">
						</tbody>
							</table>
							<p class="text-right">
								<a class="btn btn-default" id="findAllScenic">查询</a>
							</p>
</div>

这里是拼接字段，后台就不写了

$("#findAllScenic").click(function() {$.ajax({
														url : '${pageContext.request.contextPath}/system/findAllScenic',
														datatype : "json",
														type : "post",
														success : function(data) {
															var html = "";
															//清空表格数据
															$("#scenic-information").html("");
															//动态刷新表格
															for (var i = 0; i < data.list.length; i++) {
																html = "<tr>" + "<td>" + data.list[i].id + "</td>" 
																       + "<td>" + data.list[i].name + "</td>"
																	   + "<td>" + "<img width=\"60\" src=" + "\"../resources/index/img/star/" + data.list[i].recommend + "\"></img>" + "</td>"
																	   + "<td>" + data.list[i].price + "</td>"
																	   + "<td>" + data.list[i].address + "</td>"
																	   + "<td>" + data.list[i].tel + "</td>"
																	   + "<td>" + "<a class=\"btn btn-default\" href='javascript:void(0);' onclick=\"addScenicOrder('" + data.list[i].id + "')\">预定</a>" + "</tr>";
																$("#scenic-information").append(html);//将数据追加进表格
															}
														}
													});
										         });
					                          });

点击按钮后的效果如下

现在我们添加一条数据再次点击按钮

可以看到页面并没有刷新，而数据已经被拼接在下面了