首先,我们需要在页面中引入最新版本的jQuery库:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
然后,我们需要准备好一个带有某个列的GridView控件,并设定这个列的ID值,用来在后续的JS代码中定位该列:
<asp:GridView ID="MyGridView" runat="server">
<Columns>
<asp:BoundField DataField="Name" HeaderText="姓名" ItemStyle-CssClass="name-column" />
<asp:BoundField DataField="Age" HeaderText="年龄" />
<asp:BoundField DataField="Country" HeaderText="国家" />
</Columns>
</asp:GridView>
在JS代码中,我们可以使用setInterval()函数来实现定时更新某个GridView列数据的功能。我们可以将setInterval()函数包裹在一个jQuery文档就绪事件中,以确保DOM元素都已经加载完毕:
$(document).ready(function() {
setInterval(function() {
// 获取GridView中的列
var nameCol = $(".name-column");
// 遍历列并更新数据
for (var i = 0; i < nameCol.length; i++) {
var id = $(nameCol[i]).parent().parent().find("td:first-child").text();
$.ajax({
type: "POST",
url: "UpdateData.aspx/GetUpdatedData",
data: "{'id':'" + id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
$(nameCol[i]).text(response.d);
},
failure: function(response) {
alert("数据获取失败!");
}
});
}
}, 5000); // 每隔5秒钟更新一次数据
});
上述代码中,我们首先使用jQuery选择器获取到某个GridView列的所有元素,并遍历这些元素。在遍历的过程中,我们通过调用$.ajax()函数来异步获取服务端的数据,并在成功返回数据后,更新列元素的文本值。这个例子中,我们假设服务端返回的数据是某个ID对应的最新名称。
下面是一个更简单的示例:
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: "POST",
url: "UpdateData.aspx/GetUpdatedTime",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
// 更新页面中的时间显示
$("#updated-time").text(response.d);
},
failure: function(response) {
alert("数据获取失败!");
}
});
}, 1000); // 每隔1秒钟更新一次数据
});
在这个例子中,我们使用了$()选择器来获取页面中时间显示的元素,然后通过$.ajax()函数异步获取服务端的最新时间,并在成功返回数据后,更新时间显示元素的文本值。每隔1秒钟,就会有一个新的异步请求发送出去,以确保时间数据的实时性。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:利用jQuery及AJAX技术定时更新GridView的某一列数据 - Python技术站