douzai2562 2014-07-03 07:24
浏览 284
已采纳

如何通过ajax load（）函数加载页面时刷新特定的div内容

this is my html code:

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

this the script loading the page content in a 'home' div , and if i click 'tab1' that particular 'tab1.php' loading in 'home' div and when i click 'tab2' particular tab2.php is loading in 'home' div and when i click tab3 particular tab3.php is loading in 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>

when i click on the tab1 page is loaded in home div and this home div has to refresh for every 5 seconds when tab2 page is loaded in home div and this home div has to refresh for 5 seconds and same as tab3

please check the 'onload' function is for body tag!

and i tried using setInterval(function() {}); like this :

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);
        }

And the problem is when i called the page through ajax load() function than whole body of the page is loading, so i dont want to load whole page i want to refresh the page of particular div home div only, please suggest how to solve this problem.

please check onload() function i have used to call the default page tab1.php

  • 写回答

5条回答 默认 最新

  • droos02800 2014-07-03 07:41
    关注

    I suggest you to use .data() method of jQuery to provide required extra info:

    <ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" data-url="tab1.php">Tab1</a></li>
    <li><a href="#" data-url="tab2.php">Tab2</a></li>
    <li><a href="#" data-url="tab3.php">Tab3</a></li>
</ul>

    As you are using jQuery then better to use unobtrusive way of writing scripts like this:

    $('#nav a').on('click', function(e){
     e.preventDefault();
     $('.active').removeClass('active'); // removes the active class from other link
     $(this).addClass('active'); // adds the active class to current cliked link
     setInterval(function(){
       $("#home").load($('.active').data('url'),{},function(){}); // populates the div with data-url of active class.
     }, 5000);
});
 $('#nav li:eq(0) a').trigger('click'); // triggers the first link's click.
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本