ASP.net在网页上显示当前时间,利用AJAX不刷新网页
时间: 2024-03-12 13:43:38 浏览: 28
可以使用AJAX结合ASP.NET的Web服务来实现在网页上显示当前时间而不需要刷新整个页面。具体步骤如下:
1. 创建一个Web服务。在Visual Studio中,可以通过右键点击项目,选择"添加" -> "Web服务"来创建一个Web服务。在Web服务中,编写一个返回当前时间的方法。
2. 在网页中添加JavaScript代码。使用AJAX发送一个请求到Web服务,获取当前时间,并将其显示在网页上。可以使用jQuery库来方便地实现AJAX请求。具体代码如下:
```javascript
$(document).ready(function() {
// 发送AJAX请求获取当前时间
$.ajax({
type: "GET",
url: "WebService.asmx/GetCurrentTime",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// 将时间显示在网页上
$("#time").html(data.d);
},
error: function(xhr, status, error) {
console.log(error);
}
});
// 每隔1秒更新一次时间
setInterval(function() {
$.ajax({
type: "GET",
url: "WebService.asmx/GetCurrentTime",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// 将时间显示在网页上
$("#time").html(data.d);
},
error: function(xhr, status, error) {
console.log(error);
}
});
}, 1000);
});
```
在上面的代码中,我们首先发送一个AJAX请求来获取当前时间,并将其显示在网页上。然后,使用`setInterval`函数每隔1秒更新一次时间。
3. 在网页中添加一个显示时间的元素。在网页中添加一个元素,用于显示当前时间。例如:
```html
<div id="time"></div>
```
在上面的代码中,我们创建了一个`<div>`元素,并设置了一个`id`属性为"time",用于在JavaScript代码中引用。
通过以上步骤,就可以实现在网页上显示当前时间而不需要刷新整个页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)