重新加载DIV而不重新加载整个页面

时间:2013-09-14 07:52:09

标签: javascript php jquery html ajax

我有一个Div标签,有一个php include来填充信息 我想做的是让它每15秒调用一次,这样它就可以在那里更新信息而无需重新加载整个网页。 我试过用JavaScript / jQuery做这个,我似乎无法让它工作

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
</script>

<div class="View"><?php include 'Small.php'; ?></div>

这是我搜索之后的内容,发生了什么,它加载了Small.php,但它不刷新它或每15秒更新一次信息。

请帮忙!

我应该添加我应该显示的所有php数组都在Small.php中执行,而我所包含的页面就是这样,它就是孤立的。

编辑:没有人注意到我的第一个引用jQuery的脚本没有结束标记,这打破了我的第二个脚本。添加一个正确的结束标记后,脚本终于工作了,但是如果没有先使用fadeOut,fadeIn就无法正常显示。

5 个答案:

答案 0 :(得分:9)

您的代码有效,但fadeIn没有,因为它已经可见。我认为您希望实现的效果是:fadeOutloadfadeIn

var auto_refresh = setInterval(function () {
    $('.View').fadeOut('slow', function() {
        $(this).load('/echo/json/', function() {
            $(this).fadeIn('slow');
        });
    });
}, 15000); // refresh every 15000 milliseconds

在此处试试:http://jsfiddle.net/kelunik/3qfNn/1/

附加声明:正如Khanh TO所提到的,您可能需要摆脱浏览器的内部缓存。你可以使用$.ajax$.ajaxSetup ({ cache: false });或他提到的随机黑客来做到这一点。

答案 1 :(得分:7)

试试这个

<script type="text/javascript">
window.onload = function(){


var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds

}
</script>

答案 2 :(得分:1)

您的HTML不会每15秒更新一次。原因可能是浏览器缓存。 添加Math.random()以避免浏览器缓存,最好等到DOM完全加载,如@shadow所指出的那样。 但我认为主要原因是缓存

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
    var auto_refresh = setInterval(
    function ()
    {
       $('.View').load('Small.php?' + Math.random()).fadeIn("slow");
    }, 15000); // refresh every 15000 milliseconds
});
</script>

答案 3 :(得分:0)

您正在使用的代码也将包含淡出效果。这是你想要达到的目标吗?如果没有,只需添加以下INSIDE“Small.php”就更有意义了。

<meta http-equiv="refresh" content="15" >

这会每隔15秒向small.php页面添加一次刷新,这意味着如果PHP调用另一个页面,只会重新加载“frame”。

让我们知道它是否有效/解决了您的问题!?

-Brad

答案 4 :(得分:0)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />

<div class="View"><?php include 'Small.php'; ?></div>

<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
    function ()
    {
        $('.View').load('Small.php').fadeIn("slow");
    }, 15000); // refresh every 15000 milliseconds
        $.ajaxSetup({ cache: true });
    });
</script>