javascript - 如何通过ajax load()函数在页面加载时刷新特定的div内容

标签 javascript php jquery ajax

这是我的 html 代码:

<body onload="fun1()">
<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
    <li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
    <li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>

</ul>
</body>
<div id='home'></div>

这是在“home”div 中加载页面内容的脚本,如果我单击“tab1”,则会在“home”div 中加载特定的“tab1.php”,当我单击“tab2”时,会加载特定的 tab2.php在“home”div 中,当我单击 tab3 时,特定的 tab3.php 会加载到 home div 中,

 <script>
    function fun1(){

        $("#home").load("tab1.php",{},function(){});
    }


    function fun2(){

            $("#home").load("tab2.php",{},function(){});
    }

    function fun3(){

            $("#home").load("tab3.php",{},function(){});
    }


    </script>

当我点击tab1页面时,home div中加载了这个home div,并且这个home div必须每5秒刷新一次;当tab2页面加载到home div中时,这个home div必须刷新5秒,与tab3相同

请检查body标签的“onload”功能!

我尝试使用 setInterval(function() {});像这样:

function fun1(){
               setInterval(function(){
                $("#home").load("tab1.php",{},function(){});
            },5000);
        }     
     function fun2(){
               setInterval(function(){
                $("#home").load("tab2.php",{},function(){});
            },5000);
        }

     function fun3(){
               setInterval(function(){
                $("#home").load("tab3.php",{},function(){});
            },5000);
        }

问题是当我通过ajax load()函数调用页面时,页面的整个主体正在加载,所以我不想加载整个页面,我只想刷新特定div home div的页面,请建议如何解决这个问题。

请检查我用来调用默认页面tab1.php的onload()函数

最佳答案

我会这样组织代码:

<body>
  <ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="tab1.php" id="m_blink" class="selected">Tab1</a></li>
    <li><a href="tab2.php" id="d_blink">Tab2</a></li>
    <li><a href="tab3.php" id="k_blink">Tab3</a></li>
  </ul>
</body>
<div id='home'></div>

JavaScript:

jQuery(function($) {
    var $current,
    timer;

    // change current tab based on given anchor
    function changeTab($element)
    {
        if (timer) {
            clearInterval(timer); // clear old timer
        }

        $current = $element;

        // set new timer
        timer = setInterval(function() {
            refreshCurrentTab();
        }, 5000);

        // and call immediately
        refreshCurrentTab();
    }

    function refreshCurrentTab()
    {
        $('#home').load($current.prop('href'));
    }

    $('#nav').on('click', 'a', function(e) {
        e.preventDefault();
        changeTab($(this));
    });

    changeTab($('#nav .selected')); // initial tab
});

关于javascript - 如何通过ajax load()函数在页面加载时刷新特定的div内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24547481/

相关文章:

javascript - 如何覆盖 jQuery ui 可排序的拖动事件?

javascript - 通过CSS隐藏包含iframe的div底部

javascript - React - 未找到模块,对于已安装包内的包,当需要 Express 时

phpmailer 抛出 mysql 错误

javascript - bootstrap data-dismiss ="alert"——并重定向其他页面

php - 仅当值不为空时 MySQL 更新列

jquery - 在附加类后让标题淡出然后淡入

javascript - PARENT 和 FIND 的正确使用方法是什么?

jquery自动提交-form类型文件

javascript - jQuery函数检查后台页面是否完全加载?