如何通过ajax load（）函数加载页面时刷新特定的div内容
这是我的HTML代码：
这个脚本在“home”div中加载页面内容，如果我点击“tab1”，那个特定的’tab1.php’加载’home’div，当我点击’tab2’时，特定的tab2.php正在加载’home ‘div，当我点击tab3特定tab3.php正在加载家庭div，
function fun1(){ $("#home").load("tab1.php",{},function(){}); } function fun2(){ $("#home").load("tab2.php",{},function(){}); } function fun3(){ $("#home").load("tab3.php",{},function(){}); }
当我点击tab1页面加载到家庭div时，当home2页面加载到home div时，此home div必须每5秒刷新一次，此home div必须刷新5秒，与tab3相同
请检查’onload’function是否为正文标签！
我尝试使用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（）函数
我建议你使用jQuery的.data()方法来提供所需的额外信息：
当您使用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.
我会像这样组织代码：
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 });
这是您所要求的非常简单的实现。 包含注释，因此您应该能够完成它。
另外，您可以使用setInterval()函数轻松地将其更新为自动更新：
test.php 单页演示
在html中，我删除了你在那里的所有JavaScript。 将html代码与javascript代码混合起来并不好，这是不太容易理解的。
在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 // // 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 $("#m_blink").onclick(function() { }); $("#d_blink").onclick(function() { }); $("#k_blink").onclick(function() { }); // now add what should happen when you click on $("#m_blink").onclick(function() { $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php",{},function(){}); }); $("#d_blink").onclick(function() { $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab2.php",{},function(){}); }); $("#k_blink").onclick(function() { $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab3.php",{},function(){}); });
现在setInterval函数很容易编写。
两个参数，首先是你要调用的函数，第二个是以毫秒为单位的时间。
setInterval(function(){ // do something }, 5*1000);
所以现在首先只是做setInterval并将ajax放入其中，如下所示：
setInterval(function(){ $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php",{},function(){}); }, 5*1000);
但问题是，一旦用户切换标签，然后在5秒后，间隔将再次从tab1加载数据！ 我们如何解决问题，轻松。 我们将使用变量currentTable来保存表用户看到的状态。 并且对于每个表切换，我们将更改currentTable 。 我们还将在setInterval中使用currentTable ，因此函数将始终执行我们想要的操作。
所以现在再从头开始，完成js代码：
window.onload = function() { var currentTable = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/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 = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php"; reloadTab(); }); $("#m_blink").onclick(function() { currentTable = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab2.php"; reloadTab(); }); $("#m_blink").onclick(function() { currentTable = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab3.php"; reloadTab(); }); // setInterval - all we need is use reloadTab as first param setInterval(reloadTab, 5*1000); }; // end of window.onload
这就是它，你需要的所有javascript是最后一部分。
这样的事情
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
已编辑 [根据您的密码]
JavaScript的
//default page var page = 'https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php'; function fun1(){ page = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php"; $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab1.php",{},function(){}); } function fun2(){ page = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab2.php"; $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab2.php",{},function(){}); } function fun3(){ page = "https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab3.php"; $("#home").load("https://stackoverflow.com/questions/24547481/how-to-refresh-a-particular-div-content-when-page-is-loading-through-ajax-load/tab3.php",{},function(){}); } function autorefresh(){ setInterval(function(){ $("#home").load(page,{},function(){}); },5000); }
HTML