AJAX 使用 pushState()

Question

我找到了很棒的文章，它解释了如何将 pushState 与 AJAX 一起使用。 https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

但我不知道如何组织 "content.php" 文件。在评论中经常有人问这个问题，但没有人回答这个问题。这非常重要，因为没有 "content.php" 什么都行不通。

可能有人知道 "content.php" 的例子？我会很感激的。谢谢

Answer 1

您提供的 link 中的代码正在向名为 content.php 的 PHP 文件发出简单的获取请求。 PHP 文件然后 returns 一个 JSON 作为响应。

接下来我要写的是如何设置content.php文件的基本示例，不推荐，但仅作为示例，您可以这样做

<? php

$contentId = $_GET['contnentid'];
doSomethingWith($contentid) 

public function doSomethingWith($contentId)
{
    //get content with id from db or somewhere
    return json_encode(['Content' => 'Some content']);
}

Answer 2

content.php 与 window.history.pushState() 无关，并且始终特定于上下文。

更长的答案：

勾选http://html5.gingerhost.com/

在这种情况下，当您单击 "seattle" 然后 content.php returns:

{"title":"Seattle - Part of a demo for #ProSEO","h1":"Seattle","article #articletext":"
Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth \"Seattle\", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical area--the 15th largest metropolitan area in the United States, and the largest in the northwestern United States.</p>
Seattle is the county seat of King County and is the major economic, cultural and educational center in the region. The 2010 census found that Seattle is home to 608,660 residents within a metropolitan area of some 3.4 million inhabitants. The Port of Seattle, which also operates Seattle-Tacoma International Airport, is a major gateway for trade with Asia and cruises to Alaska, and is the 8th largest port in the United States in terms of container capacity.</p>","#image":""}

然后 JavaScript 使用该信息填充相关的 Div。没有关于命名的一般规则（可以是 content.php 或 content.aspx 或什么都不是）。

特别是代码是：http://html5.gingerhost.com/

$(function() {
            $('nav a').click(function(e) {
                $("#loading").show();
                href = $(this).attr("href");

                loadContent(href);

                // HISTORY.PUSHSTATE
                history.pushState('', 'New URL: '+href, href);
                e.preventDefault();


            });

            // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
            window.onpopstate = function(event) {
                $("#loading").show();
                console.log("pathname: "+location.pathname);
                loadContent(location.pathname);
            };

        });

        function loadContent(url){
            // USES JQUERY TO LOAD THE CONTENT
            $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
                    // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
                    $.each(json, function(key, value){
                        $(key).html(value);
                    });
                    $("#loading").hide();
                });

            // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
            $('li').removeClass('current');
            $('a[href="'+url+'"]').parent().addClass('current');

        }

这可以通过检查代码源获得，但是如果您将他们的代码用于您自己的站点，您可能会发现自己受到法律约束。

AJAX 使用 pushState()

AJAX using pushState()

php

jquery

ajax

html

pushstate