在每6秒加载一个页面的同一个div中使用jQuery/Ajax加载页面

Question

在我的index.php我有一个页眉，侧边栏，页脚和它的主要部分是<div id="feed">每6000 ms加载engine.php

我有一个联系人页面(Contact .php)在我的侧边栏。而不是复制我的index.php到一个新的页面，与标题，侧边栏，页脚和主div的联系内容，我可以加载它在index.php的#feeddiv不刷新网站在浏览器中?

总结一下，我的问题是，是否有任何方法，我的页面加载在相同的div (#feed)没有刷新和冻结setTimeout定时器?

当用户点击Home时，engine.php每6秒加载一次，然后重新加载一次。

也许这可以用Ajax完成，我不知道…

谢谢你的这一点和任何例子/代码是高度赞赏。

<script language="JavaScript">
$(function () {
    function loadfeed() {
        $('#feed')
            .addClass('loading')
            .load('engine.php', function () {
                $(this).removeClass('loading');
                setTimeout(loadfeed, 6000);
        });
    }
    loadfeed();
});
</script>

有这样的工作，但引擎.php加载后6秒。

$("#contactBtn").click(function() {
  $("#feed").load('contact.php');
});

Answer 1

我没有办法完全测试这一点，但是您可以尝试这样做。

<script language="JavaScript">
var timerID;
$(function () {
    function loadfeed() {
        $('#feed')
            .addClass('loading')
            .load('engine.php', function () {
                $(this).removeClass('loading');
                timerID = setTimeout(loadfeed, 6000);
        });
    }
    $("#contactBtn").click(function() {
        clearTimeout(timerID);
        $("#feed").load('contact.php');
        $("#feedBtn").bind('click', loadfeed);
    });
    loadfeed();
});
</script>

这里的关键是使用全局timerID变量和clearTimeout()函数。

如果这有效，您可以在contact.php中包含一个带有id="feedBtn"的Return to feeds按钮，但是您必须在加载后将loadfeed函数绑定到按钮的单击事件

Answer 2

在不中断超时周期的情况下，联系人表单将在#feed中显示最多6秒，直到下一个$.load请求完成。

如果你想让超时循环继续，而不是把所有的东西都放在#feed中，你可以给它一个合适的兄弟:

<div id="panels">
    <div id="feed">
        <!-- ... -->
    </div>
    <div id="contact" style="display:none">
        <!-- ... -->
    </div>
</div>

切换当前显示的内容:

$('a.contact').click(function (e) {
    e.preventDefault();
    $('#contact').show();
    $('#panels > div:not(#contact)').hide();
});
$('a.feed').click(function (e) {
    e.preventDefault();
    $('#feed').show();
    $('#panels > div:not(#feed)').hide();
});

饲料将继续加载到#feed，而联系人页面可以不间断地显示。

---

此外，如果您在链接上提供线索，则可以相当轻松地组合这些单击处理程序:

<div id="menu">
    <a href="feed.php" data-panel="feed">Feed</a>
    <a href="contact.php" data-panel="contact">Contact</a>
</div>
<script>
$('#menu > a').click(function (e) {
    e.preventDefault();
    var panel = $(this).data('panel'); // or $(this).attr('data-panel') for jQuery 1.4 or older
    $('#' + panel).show();
    $('#panels > div:not(#' + panel + ')').hide();
});
</script>

Answer 3

可以使用$.load

加载文件

$("#contactBtn").click(function() {
  $("#feed").load('contact.html') No need for a callback or the timeout.
}

如果您正在寻找更具体的东西，请检查jquery文档。