如何在给定时间后重新加载网页的一部分?

时间:2011-10-14 10:10:07

标签: javascript html ajax

我想要做的是,根据特定条件显示消息。 因此,我将在给定时间后连续读取数据库,并相应地向用户显示该消息。 但是我希望这个消息只在页面的一部分上更新(比方说DIV)。

任何帮助将不胜感激! 谢谢 !

4 个答案:

答案 0 :(得分:2)

使用setInterval()jQuery.load()

可以实现这一点

下面的示例将每隔5秒刷新一个带有ID结果的div和另一个文件的内容:

setInterval(function(){
   $('#result').load('test.html');
}, 5000);

答案 1 :(得分:0)

如果您想定期发出内容请求并使用AJAX响应更新DIV的内容,则可以使用setInterval。

setInterval(makeRequestAndPopulateDiv, "5000"); // 5 seconds

setInterval()方法将继续调用该函数,直到调用clearInterval()。

如果您使用的是JS库,则可以非常轻松地更新DIV,例如在Prototype中你可以在你的div上使用替换,例如

$('yourDiv')。replace('您的新内容');

答案 2 :(得分:0)

如果要从数据库加载数据并在当前加载的页面上显示数据而不加载页面,则需要ajax解决方案。

<script type="text/javascript" language="javascript" src="  JQUERY LIBRARY FILE PATH"></script>
<script type="text/javascript" language="javascript">
    var init;
    $(document).ready(function(){
        init = window.setInterval('call()',5000);// 5000 is milisecond
    });

    function call(){
        $.ajax({
            url:'your server file name',
            type:'post',
            dataType:'html',
            success:function(msg){
                $('div#xyz').html(msg);// #xyz id of your div in which you want place result
            },
            error:function(){
                alert('Error in loading...');
            }
        });
    }
</script>

答案 3 :(得分:0)

我并不是说我的方法是最好的,但我通常做的是处理需要访问数据库的动态内容,方法如下:

1-根据给定上下文获取消息的服务器端脚本,我们称之为“contextmsg.php”。

<?php
$ctx = intval($_POST["ctx"]);
$msg = getMessageFromDatabase($ctx); // get the message according to $ctx number
echo $msg;
?>

2-在客户端页面中,使用jquery:

var DIV_ID = "div-message";
var INTERVAL_IN_SECONDS = 5;

setInterval(function() {
    updateMessage(currentContext)
}, INTERVAL_IN_SECONDS*1000);

function updateMessage(ctx) {
    _e(DIV_ID).innerHTML = getMessage(ctx);
}

function getMessage(ctx) {
    var msg = null;
    $.ajax({
        type: "post",
        url: "contextmsg.php",
        data: {
            "ctx": ctx
        },
        success: function(data) {
            msg = data.responseText;
        },
        dataType: "json"
    });
    return msg;
}

function _e(id) {
    return document.getElementById(id);
}

希望这会有所帮助:)