Question

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

我的侧边栏中有一个联系页面（contact.php）。不是将我的index.php复制到新页面，而是使用标题，侧边栏，页脚和联系内容的主div，我可以将它加载到index.php的#feed div中，并在浏览器中刷新网站吗？

总结一下，我的问题是，有没有办法将我的页面加载到相同的div（#feed）而不刷新并冻结setTimeout计时器？

当用户点击Home时，则每隔6秒加载并重新加载engine.php。

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

感谢您的支持，我们非常感谢任何示例/代码。

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

    loadfeed();
});
</script>

更新

有这样的东西有效，但是engine.php会在6秒后加载。

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

Answer 1

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

如果你想暂停超时周期，而不是把所有内容放在#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会继续加载到#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 2

我无法对此进行全面测试，但你会尝试这样的事情。

<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()函数。

如果此方法有效，您可以在id="feedBtn"中添加带有contact.php的返回Feed 按钮，但您必须将loadfeed功能绑定到加载后按钮的点击事件。

Answer 3

您可以使用$ .load

加载文件

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

如果您正在寻找更具体的内容，请检查jquery文档。希望有所帮助。

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

3 个答案: