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

【问题标题】：how to refresh a particular div content when page is loading through ajax load() function通过ajax load（）函数加载页面时如何刷新特定的div内容
【发布时间】：2014-08-24 13:04:33
【问题描述】：

这是我的 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 必须每 5 秒刷新一次，当 tab2 页面加载到 home div 时，这个 home div 必须刷新 5 秒，与 tab3 相同

请检查'onload'功能是否适用于body标签！

我尝试使用 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 主页 div 的页面，请建议如何解决这个问题。

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

【问题讨论】：

您可以指定.load 将插入的元素：$('#home').load('tab3.php #table')，请参阅此处的文档：api.jquery.com/load
这个问题似乎离题了，因为没有尝试编写代码来完成所需的功能。

标签： javascript php jquery ajax

【解决方案1】：

类似这样的东西

javascript

$(function(){
    //adding click event
    $('#nav li a').click(function(){
        var url  =  this.id + '.php';
        $("#home").load(url,{},function(){
            // store your page id which is currently loaded with data attribute on #home element
            $("#home").data('current_page',this.id);
        });
    })

    // auto refresh function
    setInterval(function(){
        // retrieve page if which is currently loaded with data attribute on #home element
         var current_page = $("#home").data('current_page');
            var url=  current_page + '.php';
            $("#home").load(url);
    },5000);
});

html

<body>
    <ul id="nav" class="nav" style="font-size:12px;">
        <li><a href="#" id="tab1">Tab1</a></li>
        <li><a href="#" id="tab2">Tab2</a></li>
        <li><a href="#" id="tab3">Tab3</a></li>
    </ul>
    <div id='home' data-current_page='tab1'> </div>
</body>

已编辑 [根据您的代码]

javascript

//default page
var page = 'tab1.php';
function fun1(){
    page = "tab1.php";
    $("#home").load("tab1.php",{},function(){});
}


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

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


function autorefresh(){
       setInterval(function(){
        $("#home").load(page,{},function(){});
    },5000);
}

html

<body onload="autorefresh()">
    <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>
    <div id='home'></div>

【讨论】：

其实我是 php 和 javascript 新手，请告诉我 current_page 是什么意思？
还有in body标签，onload功能在页面加载时默认页面应该加载。
current_page 是与 home div 绑定的虚拟变量名，请查看api.jquery.com/jquery.data
是的，我已经这样做了，根据我的代码有没有其他可能的方法，你能分享一下代码吗？

【解决方案2】：

在 html 中，我删除了您那里的所有 javascript。 html代码和javascript代码混在一起不好，比较难理解。

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

在javascript中：

// First we need to make onload, that we removed from html.
// So I make a function and bind it to window.onload, which is almost same as
// <body onload="bla()">
// Everything inside the function will then happen after html is loaded 
// in browser, which is very important, because we cant manipulate with 
// elements that doesn't exist yet.

window.onload = function() {
            // there we need to put all code
        };

现在让我们进行一些转换。在没有刷新的情况下做所有事情。我们有 3 个标签，所以我们需要在家中制作新内容：

// first we need to add event onclick to our <a>
$("#m_blink").onclick(function() { });
$("#d_blink").onclick(function() { });
$("#k_blink").onclick(function() { });

// now add what should happen when you click on <a>
$("#m_blink").onclick(function() {
    $("#home").load("tab1.php",{},function(){});
});

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

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

现在setInterval 函数很容易编写。

两个参数，第一个是你要调用的函数，第二个是以毫秒为单位的时间。

setInterval(function(){
// do something
}, 5*1000);

所以现在首先只是执行 setInterval 并将 ajax 放入其中，就像这样：

setInterval(function(){
    $("#home").load("tab1.php",{},function(){});
}, 5*1000);

但问题是，一旦用户切换了tab，5秒后interval会再次从tab1加载数据！我们如何解决问题，很容易。我们将创建变量currentTable 来保存表用户看到的状态。每次切换表时，我们都会更改currentTable。此外，我们将在 setInterval 中使用currentTable，因此函数将始终执行我们想要的操作。

所以现在又从头开始，完整的js代码：

window.onload = function() {

    var currentTable = "tab1.php"; // this is our initial state

    // now I define function reloadTab, because we do that all the time
    // and it is boring to write same code again and again
    function reloadTab() {
        $("#home").load(currentTable,{},function(){});
    }

    // onclicks - it is so easy now, we just change tab and call realoadTab
    $("#m_blink").onclick(function() {
        currentTable = "tab1.php";  
        reloadTab();
    });

    $("#m_blink").onclick(function() {
        currentTable = "tab2.php";  
        reloadTab();
    });

    $("#m_blink").onclick(function() {
        currentTable = "tab3.php";  
        reloadTab();
    });

    // setInterval - all we need is use reloadTab as first param
    setInterval(reloadTab, 5*1000);

}; // end of window.onload

就是这样，您需要的所有 javascript 都是最后一部分。

【讨论】：

:你能详细说明一下吗，我不明白
实际上我是 php 和 javascript 的新手，请详细说明，我的问题是：当 onclick 特定的 HOME div 必须刷新 5 秒并且单击 tab2 时，home div 中的 page2 内容必须刷新5秒，
好吧，现在我让代码尽可能简单。请记住，Jacks 代码更好，它可以解决您现在看不到的问题。
是的，我已经完成了你的代码，它得到 'Uncaught TypeError: undefined is not a function'

【解决方案3】：

我会这样组织代码：

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

【讨论】：

其实我是 php 和 javascript 的新手，你能不能给我简单的代码
@John 好吧，你想要的并不完全是微不足道的；所以这就像我能做到的一样简单。
+1 获得无法以任何方式击败的完整解决方案。太可惜了，约翰无法理解……

【解决方案4】：

我建议你使用 jQuery 的.data() 方法来提供所需的额外信息：

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

当您使用 jQuery 时，最好使用不显眼的方式编写这样的脚本：

$('#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.

【讨论】：

有没有其他可能的方法，在页面加载时刷新'home' div，而不刷新整个页面？
@John 您可以触发点击，就像答案中更新的那样。
其实我是 php 和 javascript 新手，你能不能写代码！
实际上，您也可以使用锚点的href 属性，因为它并没有真正用于其他任何事情;-)
原来我回答了同样的问题here; OP似乎不认为两次发布问题有问题=（

【解决方案5】：

这是您所要求的一个非常简单的实现。包含 cmets，所以你应该能够通过它。

另外，您可以使用setInterval() 函数轻松地将其更新为自动更新：

test.php 单页演示

<?php

// Dummy Ajax Handler
if (!empty($_GET['load']))
{
    switch ($_GET['load'])
    {
        case 'tab1':
            echo "hello from tab 1";
            break;

        case 'tab2':
            echo "hello from tab 2";
            break;

        case 'tab3':
            echo "hello from tab 3";
            break;
    }
    exit();
}

?>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

// When Page Loads
$(function()
{
    // Load Tab 1 By Default
    $('#home').load('test.php?load=tab1');

    // Handle Nav Clicks
    $('#nav li a').click(function()
    {
        // Load Requested Tab
        $('#home').load('test.php?load=tab' + $(this).attr('data-tab'));
    });
});

</script>


<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" data-tab="1" id="m_blink">Tab1</a></li>
    <li><a href="#" data-tab="2" id="d_blink">Tab2</a></li>
    <li><a href="#" data-tab="3" id="k_blink">Tab3</a></li>
</ul>

<div id="home"></div>

【讨论】：

我已经按照你的代码做了，整个页面正在加载中，
我的代码还有其他可能的方法吗，你能分享一下代码吗！