Question

我正在为工作中的大型显示器创建一个仪表板，我已经设法让一个div自动刷新一个php请求页面，但是我想不出在另一个脚本上使用这个函数的方法而不复制整个功能并将其重命名，这看起来很愚蠢。

这是我到目前为止所做的：

<script type="text/JavaScript"> 
$(document).ready(
function update() 
{
    $.get("response.php", function(data){
            $("#ajaxtest").html(data);
            window.setTimeout(update, 10000);
        });
});
</script>

我这样做了一些关于stackoverflow的搜索并找到了这个漂亮的小提取物，虽然它只用于单个div ...（second example: auto refreshing div with jquery）

Answer 1

您已完成更新功能，以便在文档准备就绪时直接调用。这不一定是个好主意，你希望这个函数可以多次调用。例如，请考虑以下（未经测试的代码！）：

function update(divId) 
{
   $.get("response.php", function(data){
   $(divId).html(data);
   window.setTimeout(update, 10000);
}

然后

$(document).ready(function(){
   update("#ajaxtest");
   update("#otherdiv");
   update(".divsbycssclass");
});

如果你还需要一个不同的网址传递。您可以通过计时器或事件调用此更新方法：

$("a").click(function(){
   update("#ajaxtest");
});

这是你指的是什么？如果没有，请随时发表评论，我将进行编辑。

Answer 2

$(document).ready(

function update(el) 
{
    $.get("response.php", function(data){
    el.html(data);
    window.setTimeout(el, 10000);
});

update($("#ajaxtest"));

});

Answer 3

您需要做的就是一次返回多组内容。这意味着以某种结构发送数据，因此您的JS可以快速解析它并适当地应用内容。最好的方法是使用JSON - 一种易于阅读的数据交换格式和Javascript的子集。

首先，更改PHP以生成要发送的内容数组：

$divs = array (
    'firstDiv'  => $firstDivContent,
    'secondDiv' => $secondDivContent
);

然后，您需要使用json_encode将其编码为JSON：

$divs_json = $divs;

然后使用适当的标题将其返回给浏览器：

header('Content-type: application/json');
echo $divs_json;
die();

在您的Javascript中，您只需要发出一个请求即可接收这两个部分。您可以使用setInterval和匿名函数使代码每10秒重复一次：

setInterval(function(){
    $.get('response.php', function(data) { //data is a JS object with two properties, firstDiv and secondDiv
        $('#firstDiv').html(data.firstDiv);
        $('#secondDiv').html(data.secondDiv);
    });
}, 10000);

Answer 4

这只是一个未经考验的想法，但试一试......

function update(){
    // all your defined classes which are .refreshingDivs will do the following
    $('.refreshingDivs').each(function(){
        // foreach refreshingDiv, get their id attribute and send with request
        // so that response.php knows what to do for each specific div
        $.get('response.php?id=' + $(this).attr('id'), function(data){ 
            // place the returned data inside refreshingDiv children 
            // which has the .placeholder class
            $(this).children('.placeholder').html(data);
            window.setTimeout(update, 10000);
        });
    });
}
$(document).ready(function(){
    update();
});

如果你有控制器刷新特定的div，Simon的方法似乎最适合你。

Answer 5

我添加了一些问题，因此根据Ran Bar-Zik的回答，我想出了以下似乎对我有用的问题。

$(document).ready(function(){
    var refreshId = setInterval(function(){
        update("#test", "/test.php");
    }, 30000);
    $.ajaxSetup({ cache: false });

    update("#test", "/test.php");
});

function update(divId, fileId)
{
    $.get(fileId, function(data){
    $(divId).html(data);
    });
}

我现在知道这是对还是错，但它对我有用。

该行

window.setTimeout(update, 10000);

Ran Bar-Zik的回答只是不想为我工作，不明白为什么。初始加载工作，但刷新没有，所以我修改了上面的代码，使其工作。

使用Jquery自动刷新多个div

5 个答案: