如何使用新 URL 刷新部分内容？答案

【问题标题】：How to refresh partial content with new URLs?如何使用新 URL 刷新部分内容？
【发布时间】：2013-12-04 23:25:20
【问题描述】：

我希望保留页面上的某些部分（如页眉、页脚），并且只更改主要内容。同时，URL 也应该根据新的内容发生变化。

我了解 AJAX/iframe，但我不想使用它们，因为 URL 保持不变。

请看123contactform.com。尝试使用左侧菜单并注意主要内容和 URL 都发生了变化（而页眉、菜单、页脚保持不变）。

这是如何实现的？

谢谢。

【问题讨论】：

Tom Dale 刚刚有关于 URL 的 a great talk at CaskadiaJS。我相信您可以使用他帮助开发的route-recognizer 和相应的router.js 来做您想做的事情
this answer 对您有帮助吗？此外，您可能对使用 Backbone framework 感兴趣，因为它很容易处理这种情况。
正如许多人在您所指的网站下方指出的那样，它不仅仅是更新其内容，它看起来就是这样。更改部分加载的 URL 仅限于 this answer。从安全的角度考虑您的要求：如果我可以在浏览器的地址栏中显示我喜欢的任何 URL，而无需实际位于该资源上，我可以使用它来让人们相信他们在某个地方，他们不在从而滥用这个。
这是一个合法的问题。提供的示例与请求不同。 Facebook 在这方面做得最好。

标签： html url partial

【解决方案1】：

忽略给出的示例是 2 倍。 获取内容和更新网址栏

1) 无需刷新页面即可获取内容

使用 jQuery，您可以将内容加载到页面的主要区域，正如许多其他答案所述。

最简单的存在

$( "#result" ).load(url);

2) 更改网址。

注意：使用除井号 (#) 以外的任何内容表示页面已重新加载。

使用 hashchange jQuery 插件 (https://github.com/cowboy/jquery-hashchange) 或 jQuery Address 插件 (http://www.asual.com/jquery/address/) 允许您使用该哈希值来检测它何时更改并轻松执行操作。

有关历史插件的更多辩论请参阅：The best Ajax History and Bookmark plugin currently available

把它们放在一起

有jQuery BBQ(http://benalman.com/projects/jquery-bbq-plugin/)

在此示例 (http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/) 中，您可以看到内容是从只有与选项卡关联的图像和文本的小 html 文件加载的

【讨论】：

【解决方案2】：

所以问题是您想加载此内容，但又不想刷新页面。

您不想使用 Ajax，（老实说，这可能是您应该这样做的最佳方式。）而且您不希望页面再次加载。

如果您使用 MVC 来构建它，那么建议的路线将是采用上述答案的方式。添加 PHP 包含以保留您的页眉和页脚。

但如果你真的坚持不使用这些。

您可以将所有内容放在同一页面上并从一开始就隐藏它们。并使用左侧的菜单项，根据您的选择使用 javascript 显示或隐藏右侧的菜单项。

这是您在没有 MVC、AJAX 或页面重新加载的情况下实现这一切的唯一方法。
强烈不推荐。但是，会做的工作......

【讨论】：

如果您不想移动所有内容，您可以添加包含 iframe 的 div，以显示您拥有的链接内容。然后隐藏/显示菜单选择。

【解决方案3】：

你提供的例子很简单：

每个左侧菜单都是一个新的 htm 文件的锚点，因此 url 发生了变化。示例：

<div id="left" class="leftmenu">
                    <div class="menuitem"></div>

                    <div id="tour_tab_1" class="menuitem active" onclick="tour_show_tab(1);"><a href="/tour.html"><span class="sprite-left-menu sprite-left-menu-edit"></span>Build web forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>  

                    <div id="tour_tab_2" class="menuitem " onclick="tour_show_tab(2);"><a href="/styling-forms.htm"><span class="sprite-left-menu sprite-left-menu-themes"></span>Add branding</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>      

                    <div id="tour_tab_3" class="menuitem " onclick="tour_show_tab(3);"><a href="/mobile-web-forms.htm"><span class="sprite-left-menu sprite-left-menu-code"></span>Publish anywhere</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_4" class="menuitem " onclick="tour_show_tab(4);"><a href="/form-to-email-submissions.htm"><span class="sprite-left-menu sprite-left-menu-notif"></span>Get notifications</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_5" class="menuitem " onclick="tour_show_tab(5);"><a href="/online-database-forms.htm"><span class="sprite-left-menu sprite-left-menu-submissions"></span>Manage data</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_6" class="menuitem " onclick="tour_show_tab(8);"><a href="/apps-integrations.htm"><span class="sprite-left-menu sprite-left-menu-apps"></span>Add 3<sup>rd</sup> party apps</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_7" class="menuitem " onclick="tour_show_tab(7);"><a href="/purchase-order-forms.htm"><span class="sprite-left-menu sprite-left-menu-payments"></span>Accept payments</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_8" class="menuitem " onclick="tour_show_tab(6);"><a href="/conditional-logic-forms.htm"><span class="sprite-left-menu sprite-left-menu-rules"></span>Branch forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>     
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_9" class="menuitem " onclick="tour_show_tab(10);"><a href="/translate-forms.htm"><span class="sprite-left-menu sprite-left-menu-translations"></span>Go multilingual</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_10" class="menuitem " onclick="tour_show_tab(9);"><a href="/sub-users.htm"><span class="sprite-left-menu sprite-left-menu-users-pink"></span>Create subusers</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_11" class="menuitem " onclick="tour_show_tab(11);"><a href="/captcha-form-validation.htm"><span class="sprite-left-menu sprite-left-menu-security"></span>Stay secure</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div> 
                    <div class="menuitem separator"></div>

                </div>

但是，每个链接页面都将包含常见文件，如页眉、左侧菜单和页脚。单击的菜单将被激活。

希望对您有所帮助！ :)

【讨论】：

是的，它们都有不同的链接。但他希望这个链接只改变页面右侧的内容。不改变整个页面本身。

【解决方案4】：

有很多方法可以做到这一点。

使用 jQuery 你有$.load

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

如果您的数据更复杂，您可以使用$.ajax

    $.ajax({
        type: 'GET',
        url: "http://www.somewhere.com/json",
        data:bcData,
        error: function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        success: function(data){
            var ul = $("<ul/>:);
            for (var i=0;i < data.items.length;i++){
                var li = $("<li/>",{"html":data[i].html});
                ul.append(li);
            }
            $("#someConainer").append(ul);

        }
    });

如果您的应用程序很复杂，我会考虑使用框架。

我喜欢http://angularjs.org/，但还有很多其他的。

【讨论】：

【解决方案5】：

试试这样的

header、footer 和 nav 是不变的。只有内容会像这样不断变化。

header.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        //css goes here

        <script  src="jquery.js"></script>
        ...
    </head>
    <body>
        <div style="float:left;width:40%;">
            <?php include 'left_nav.php';?>
        </div>
        <div style="float:right;width:60%;">

页脚.php

        </div>
    </body>
</html>

left_nav.php

  <ul>
    <li><a href="sample1.php">A</a></li>
    <li><a href="sample2.php">B</a></li>
  </ul>

sample1.php

<?php include 'header.php';?>
    First page  Content A
<?php include 'footer.php';?>

sample2.php

<?php include 'header.php';?>
    Second page  Content B
<?php include 'footer.php';?>

【讨论】：

【解决方案6】：

在您指出的站点中，它们实际上刷新了整个页面（您可以通过 fiddler 或其他工具来验证这一点以监控网络流量。）

至于您的问题，您可以简单地使用 ajax 并在回调中包含您要设置的 url，然后您可以使用 javascript 手动设置它，如下所示：

window.history.replaceState(null, <name to appear in history>, <url>);

阅读更多关于操纵历史的信息here

【讨论】：

【解决方案7】：

您向我们推荐的网页只是一个普通网站。如您所见，左侧栏中的链接会将您带到另一个页面。主要内容在包装器中，但页眉、页脚和其他所有内容都是相同的（大部分情况下）。这可以通过动态创建您的内容（使用 PHP 或其他 Web 开发语言）来实现。基本上你有一个大页面，其中包含更多的块或页面。其中之一是主列，它根据您提供的链接创建它的内容。您也可以使用 .htaccess 文件来创建重定向，以便您的链接格式更好。 nkmol 的回答也几乎可以回答您的问题。

尝试研究 Web 开发框架，因为它们可以更清楚地说明您的问题。

看看这个： http://en.wikipedia.org/wiki/Web_template_system

【讨论】：

【解决方案8】：

您可以使用 pushState 和 ajax 来做到这一点。看看pjax。

【讨论】：

【解决方案9】：

我使用带有 Firebug 的 Firefox 测试了指定的网站。在 Firebug 下的 Net -> Images 我们可以看到特定网页的所有下载图像。

当我点击左侧菜单时，它不会从服务器下载所有图像。例如，左上角的“123 联系表图像”和可爱的“注册山羊图像”在浏览时没有从服务器下载通过不同的网页。

但是当我点击 Ctrl + F5 时，所有的图片都是从服务器下载的。我认为他们使用缓存机制来实现这个功能。

当我使用 goggled 时，我可以看到 Zend 框架提供了用于缓存网页日期的特殊 API，您可以在以下链接中找到更多信息

http://framework.zend.com/manual/1.12/en/zend.cache.html Cache only part of a page in PHP

根据我的测试，我可以得出结论，这个功能是通过使用缓存机制来实现的。

【讨论】：

【解决方案10】：

其实你给的网页不只是刷新它的内容。看起来可能是这样，但是您可以看到标题仍在闪烁，也就是刷新（如果您实时更改内容，单击链接时它也会更改）

实际上有一个全新的页面。但他们使用模板来创建内容。

一个页面是一个模板网站，它调用网页的不同部分（即页脚、页眉和内容）。根据给定的输入，内容可以只包含其他内容。

这可以通过 php 来完成。

Template.php

include "header.php";

include $contentpage;

include "footer.php";

您在哪里提供要加载的不同内容文件名。

Header.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
</head>
<body>
BLALBLA CONTENT

content.php

echo $content;

footer.php

</body>
</html>

这将共同创建一个包含动态内容和静态页眉和页脚的页面（您还可以在其中添加静态脚本）。

这只是关于如何实现这一点的基本想法。

静态内容（页眉和页脚）也可以兑现以更快地加载。

附加信息我为什么这么认为

此外，当您将链接打开到选项卡中时，您会看到每个链接都包含标题。例如，与 iFrame 一样，链接中只会显示动态内容。

【讨论】：

嗨，我一直在使用相同的技术来创建 cms，并且一直想知道用户提出的相同问题，即电子商务网站的标题和过滤器已修复，尽管现在重新加载了页面，我觉得你是是的，我使用过期标头作为缓存机制，但有时它需要刷新页面才能更新我如何更改此行为并在更新后更新内容（我认为重置缓存类似的东西）
@NaveenThally 在静态内容中添加内容后，您只需删除缓存即可。让服务器生成一个新的缓存，你应该没问题。它之所以有效，是因为您只需执行一次，然后从那里为所有用户加载缓存文件。希望这有帮助！

【解决方案11】：

您可以使用 jQuery load 函数来做到这一点。

【讨论】：

但这不会将 URL 更改为新地址。