Ajax+setInterval定时异步刷新页面
这个是之前一个项目中用到的功能，现在记录一下他的使用步骤。
现在讲解一下具体的关键代码：
1. window.onload：是指等待页面html和css都执行完毕以后才开始执行js文件，因为我这个文件是用来测试的，所以js文件放在头部。
2. setInterval()是启用计时器的函数，函数中需要传递两个参数，一个是一个函数，是指这段时间内需要执行什么操作，第二个参数是间隔的时间。
3. clearTimeout() 是指当执行一段时间之后清除计时器，这个在该案例中没有使用到。
4. $.post ：是jquery操作ajax发出post请求的函数，其中需要三个参数，第一个参数是向哪个页面发送请求，第二个参数是向后台传递的参数，可以是键值对，也可以使json数据格式的，第三个参数是返回函数，里面的data是后端发送过来的数据。
5. window.onload千万别写成window.onload()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Js/jquery-1.7.1.js"></script>
<link href="../Css/tableStyle.css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
loadUserInfo();
}
setInterval(function () {
$("#tabList").load(location.href + " #tabList>*", "");
loadUserInfo();
}, ); function loadUserInfo() {
$.post("UserList.ashx", {}, function (data) {
var serverData = $.parseJSON(data);
var serverDataLength = serverData.length;
for (var i = ; i < serverDataLength; i++) {
$("<tr><td>" + serverData[i].Id + "</td><td>" + serverData[i].UserName + "</td><td>" +
serverData[i].UserPass + "</td><td>" + serverData[i].Email + "</td><td>").appendTo("#tabList");
}
});
}
</script>
</head>
<body>
<a href="AddUserInfo.html">添加</a>
<table id="tabList">
<tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>详细</th><th>删除</th><th>编辑</th></tr> </table>
</body>
</html>
后端代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
using Model;
namespace WebApp.ajax
{
/// <summary>
/// UserList 的摘要说明
/// </summary>
public class UserList : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
BLL.UserInfoService UserInfoService = new BLL.UserInfoService(); List<UserInfo> list = UserInfoService.GetList(); //将数据库中读取的数据保存在list中
//转换json的方法
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str = js.Serialize(list);//转换json数据
context.Response.Write(str); //写入到返回的数据中
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
谢谢观看！！！
Ajax+setInterval定时异步刷新页面的更多相关文章
- Ajax实现定时刷新页面
function deleteValue(){ var refresh = function() { $.ajax({ type:'post', url:'/Application/index ...
- php+ajax+jquery 定时刷新页面数据
testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。
使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据.我以为是因为我路由用的push导致的,改成repla ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- ajax用get刷新页面元素在IE下无效解决~~
总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...
- PHP与Ajax的交互更新页面
PHP与Ajax的交互更新页面 本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax? 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网 ...
- Ajax方法实现登录页面
Note: ajax技术 不用刷新页面,做局部刷新不用form表单,因为不需要提交,通过JQuery控制必须要有id如果要用ajax可以用JQuery也可以用js写,推荐JQuery 因为简单,直接引 ...
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
- JSP简单练习-定时刷新页面
<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...
随机推荐
- JDK丨WIN10配置JDK1.8 （解决javac不是内部或外部命令，也不是可运行的程序或批处理文件）
1.下载JDK,安装. 2.配置JDK. (右键我的电脑 - 属性 - 高级系统设置 - 环境变量.) 2.1 添加系统变量JAVA_HOME 变量名:JAVA_HOME 变量值:C:\Program ...
- django请求接收及文件上传
在写后端交互页面的时候常常会遇到接收来自前端页面请求的情况,例如 在写注册页面的时候,会提交一些页面信息,这时需要分三种情况讨论 第一种,接收单项信息: v = request.POST.getlis ...
- java学习之方法内部类
*方法内部类 * 在类中的方法内定义一个类 * 注意: * 1 方法内部类只能在类的方法内实例化不可以在此方法外实例化 * 2 .方法内部类对象只能用所在方法体中的变量不能改,jdk1.8可以 * 以 ...
- python下载及安装
1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档. 2, 首先,学Python需要有一台电脑,这是必须的.老师的系统是windows ...
- sql 查询所有作业的详情
DECLARE @WeekDays TABLE ( freq_interval INT, weekdays ) ) INSERT INTO @WeekDays ,N'星期日 ' UNION ALL , ...
- linux关机（重启）命令
Linux系统关机命令: #关机命令 1.halt 2.poweroff 3.shutdown -h now 立即关机(具有root权限用户使用)#重启命令 1.reboot 2.shutdown - ...
- Typora/VSCode/Sublime 更改Markdown默认宽度样式等
Typora 所见即所得Markdown编辑器更改 最大宽度 C:\Users\Desk\AppData\Roaming\Typora\themes\github.css CSS第46行改为 max- ...
- 搭建rsync服务并同步重要数据
在主备机器上均安装rsync,在主机上以daemon的模式启动,在备机上定时执行同步命令.安装rsync的命令如下: 1.下载安装包(主备机均执行) [root@localhost home]# wg ...
- Java中==和equals方法
Java程序中测试两个变量是否相等有两种方式:1.== :2.equals()方法 当使用==来判断两个变量是否相等时,如果两个变量是基本类型变量,且都是基本数值类型(不一定要求数据类型严格相同),则 ...
- Java8增强的包装类
为了解决8中基本数据类型的变量不能当成Object 类型变量使用的问题,Java提供了包装类的概念,为8种基本数据类型分别定义了相应的引用类型,并称为基本数据类型的包装类. JDK 1.5提供了自动装 ...