bootStrap table+ajax加载数据

最新推荐文章于 2025-06-25 07:49:02 发布

丶瓦力

最新推荐文章于 2025-06-25 07:49:02 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/j277699931/article/details/49975755

学习笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用Ajax技术动态加载公告列表的方法。通过发送异步请求获取服务器上的公告数据，并将其插入到HTML表格中展示。具体实现包括定义Ajax请求参数、处理返回的数据以及动态创建和填充HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//ajax加载notice
	$(function() {
		//${pageContext.request.contextPath}/
		url = "getHomeNotice.action";
		$.ajax({
			url : url,
			type : "post",
			dateType : "text",
			success : function(res) {
				loadNotice(res); //加载notice					
			}
		});
	});

	//加载notice
	function loadNotice(res) {
		var tBody = $("#noticeTable").find("tbody");
		for ( var index in res) {
			//新建一行
			var newTr = $("<tr></tr>");
			//新建节点
			var newsTd = $("<td></td>");
			var dateTd = $("<td></td>");
			//新建超链接
			var newsA = $("<a></a>");

			//添加内容和时间
			var noticeTitle = res[index].noticeTitle;
			var noticeDate = res[index].noticeDate;
			/* alert(noticeTitle);
			alert(noticeDate); */
			newsA.text(noticeTitle);
			dateTd.text(noticeDate);

			//添加数据td-tr-tbody
			newsTd.append(newsA);
			newTr.append(newsTd);
			newTr.append(dateTd);
			tBody.append(newTr);
		}
	}<pre name="code" class="html">

<pre name="code" class="html">html

<table id="noticeTable" class="table table-striped table-hover">
				<tr>
					<th class="col-md-3">活动标题</th>
					<th class="col-md-1">发布时间</th>
				</tr>
			</table>