【前台】页面DIV局部自动刷新的实现

最新推荐文章于 2025-05-17 10:43:26 发布

beautylanlan

最新推荐文章于 2025-05-17 10:43:26 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/beautylanlan/article/details/88949049

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种解决IE浏览器缓存导致的AJAX请求不更新问题的方法，并演示了如何通过定时调用AJAX获取后台数据来实现页面的自动刷新。

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

定义一个div如下面的例子:

定义了一个div，其中包含有一个<label>标签，显示时间，还包含有一个<img>空间，显示图片

<div style="text-align: center; width: 100%; border: 1px;" id="screenDisplayDIV">
        <label>状态时间:</label><label id="creatTime"> @Model.CreateTime.ToString("yyyy-MM-dd HH:mm:ss") </label> 
        <img id="screenImg" src='@Model.PicPath' style="margin: 0 auto;" />
</div>

接下来写javascript 调用jquery的ajax 局部提交后台获取数据，赋值给div的两个控件，其中在调用ajax的时候，传入一个时间

url: "/Operation/GetAutoScreenDisplay?dateTime=" + newDate,这个时间在后台没有作用，但是一定需要，是因为要兼容IE,如果不加这个dateTime参数，在使用IE浏览器的时候，它不会去后台调用【GetAutoScreenDisplay】这个Action的，是因为ie的缓存做的不好，为了防止ajax不停的提交，有时候会不执行，直接返回。当传递的参数值相同时ajax会不执行。所以传入一个不停变化的时间参数，在使用IE浏览器的时候也可以按自动刷新调用后台。用 setInterval(方法,时间间隔)设置自动刷新的间隔时间

setInterval(function () {
                    var newDate = new Date();
                    $.ajax({
                        url: "/Operation/GetAutoScreenDisplay?dateTime=" + newDate,
                        type: "GET",
                        success: function (data) {
                            switch (data.type) {
                                case -1:
                                    window.location = data.href;
                                    break;
                                case 0:
                                    window.location = data.href;
                                    break;
                                case 1:
                                    toastr.error(data.message);
                                    break;
                                case 2:
                                    //用jquery选择器给DIv中的两个控件赋值
                                    $('#creatTime').text(getdate(data.CreateTime));
                                    $("#screenImg").attr("src",data.PicPath);
                                    
                                    break;
                            }
                        },
                        error: function (e) {
                            toastr.error("获取信息失败, 网络通信出现异常");
                        },
                    });
                   // $("#screenDisplayDIV").load(location.href + " #screenDisplayDIV");
                }, timeoutPeriod * 1000)