Question

我正在尝试使用显示页面的服务器名称刷新页面上的div。这仅用于测试，因此我们可以测试当auth cookie超时时会发生什么。我想用jquery做这个，但我似乎无法得到任何工作。我在网上找到了一个我一直在努力的例子，但也一直在弄错。

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

以下是我找到的代码示例。有人能帮我吗？我对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>

`

Answer 1

试试这个：

$(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>

那发生了什么？

一旦页面准备好，我将调用refresh，然后对path/to/server/page.php进行ajax调用，这将返回所需的结果。

我在div#server-name中显示结果，然后我执行setTimeout，每隔refresh mili秒再次调用interval。

Answer 2

朗达，

这是你可以尝试的另一个例子。您使用的是MVC还是ASP.NET WebForms？

<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>

使用jquery计时器重新加载Div

2 个答案: