使用jquery计时器重新加载Div_Jquery

使用jquery计时器重新加载Div

jquery

使用jquery计时器重新加载Div,jquery,Jquery,我正在尝试使用显示页面的服务器名称刷新页面上的div。这只是为了测试，所以我们可以测试auth cookie超时时会发生什么。我想用jquery实现这一点，但我似乎无法让任何东西正常工作。我在网上找到了一个我一直在研究的例子，但也不断出现错误 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script> <s

我正在尝试使用显示页面的服务器名称刷新页面上的div。这只是为了测试，所以我们可以测试auth cookie超时时会发生什么。我想用jquery实现这一点，但我似乎无法让任何东西正常工作。我在网上找到了一个我一直在研究的例子，但也不断出现错误

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

我们在每个服务器上都有一个html页面，其中只包含服务器名称。我们希望在div中显示的是该页面中的文本

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

下面是我找到的代码示例。有人能帮我吗？我对jquery还很陌生。任何帮助都将不胜感激

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

谢谢

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>


$（文档）.ready（函数（）{
var j=jQuery.noConflict（）；
j（文件）.准备就绪（功能（）{
每次（5000，函数（i）{
j、 阿贾克斯({
url:“refresh.html”，
cache:false，
成功：函数（html）{
j（“.refreshMe”）.html（html）；
}
})
})
});
css（{color:“red”}）；
});

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

`试试这个：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

$(document).ready(function () {
    var interval = 500;   //number of mili seconds between each call
    var refresh = function() {
        $.ajax({
            url: "path/to/server/page.php",
            cache: false,
            success: function(html) {
                $('#server-name').html(html);
                setTimeout(function() {
                    refresh();
                }, interval);
            }
        });
    };
    refresh();
});

<div id="server-name"></div>

$（文档）.ready（函数（）{
var interval=500；//每次调用之间的毫秒数
var refresh=function（）{
$.ajax({
url:“path/to/server/page.php”，
cache:false，
成功：函数（html）{
$（'#服务器名称'）.html（html）；
setTimeout（函数（）{
刷新（）；
}，间隔）；
}
});
};
刷新（）；
});

那么发生了什么

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

页面准备好后，我将调用

refresh

，然后对

path/to/server/page.php进行ajax调用，该调用将返回所需的结果
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

我在div#server name
中显示结果，然后执行setTimeout
，每隔interval
mili秒再次调用refresh
。
Rhonda
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

下面是另一个你可以尝试的例子。您使用的是MVC还是ASP.NET WebForms
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var j = jQuery.noConflict();
        j(document).ready(function () {
            j(".refreshMe").everyTime(5000, function (i) {
                j.ajax({
                    url: "refresh.html",
                    cache: false,
                    success: function (html) {
                        j(".refreshMe").html(html);
                    }
                })
            })
        });
        j('.refreshMe').css({ color: "red" });
    });
</script>

<html>
<head>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var timer = setInterval( updateDiv, 5000);
            var counter = 0;  //only here so we can see that the div is being updated if the same error is thrown

            function updateDiv() {
                var messageDiv = $('#content');
                $.ajax({
                        type: 'GET',
                        async: false,
                        url: "your.site.com/path/page.ext",
                        cache: false,
                        success: function(result) {
                            counter++;
                            messageDiv.empty();
                            messageDiv.append(result);
                            messageDiv.append("<br />");
                            messageDiv.append("counter = " + counter);
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            counter++;
                            messageDiv.empty();
                            messageDiv.append("thrown error: " + thrownError);
                            messageDiv.append("<br />");
                            messageDiv.append("status text: " + xhr.statusText);
                            messageDiv.append("<br />");
                            messageDiv.append("counter = " + counter);
                        }
                });
            }   

        });
    </script>
</head>
<body>
    <h2>Div is below here</h2>
    <div id="content"></div>
</body>
</html>


$（文档）.ready（函数（）{
var定时器=设置间隔（updateDiv，5000）；
var counter=0；//只有在这里，我们才能看到在抛出相同错误时正在更新div
函数updateDiv（）{
var messageDiv=$（'内容'）；
$.ajax({
键入：“GET”，
async:false，
url:“your.site.com/path/page.ext”，
cache:false，
成功：功能（结果）{
计数器++；
messageDiv.empty（）；
messageDiv.append（结果）；
messageDiv.append（“
”）；
messageDiv.append（“计数器=”+计数器）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
计数器++；
messageDiv.empty（）；
messageDiv.append（“抛出错误：+thrownError”）；
messageDiv.append（“
”）；
messageDiv.append（“状态文本：+xhr.statusText”）；
messageDiv.append（“
”）；
messageDiv.append（“计数器=”+计数器）；
}
});
}   
});
Div在下面
最好使用同步调用而不是$.ajax。异步调用可能会很快失去同步，这取决于响应时间。但是，它不希望在我实际需要运行它的aspx页面中工作。我会继续玩它，看看我是否能让它工作。你可以用.html快捷地更新DIV的代码，但我想打破它，所以它是清楚的。