Question

我想在此处创建导航：http://html5.gingerhost.com/

我遵循本教程：http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

实际上已经完成并且好像有效但我对如何改进它有疑问（我认为我做错了，不是教程的作者）

我的文件夹结构：

localhost
  -/try
    -script.js
    -index.php
    -content.php
    -/New York
      -index.php
      -content.php

index.php（都是相似的，只是标题标题和文章不同）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <header id="header"><h2>Home</h2></header> <!-- end header -->
    <div id="content">
        <div id="loading"></div>
        <nav>
            <ul id="menu"> 
                <li><a href="/Try">Home</a></li>
                <li><a href="/Try/Seattle">Seattle</a></li>
                <li><a href="/Try/New York">New York</a></li>
                <li><a href="/Try/London">London</a></li>
            </ul>
        </nav>
    <div id="main">
        <article>
            <div id="articletext">
                <p>This is home page</p>
            </div> 
        </article> <!-- end post 1 -->
    </div> <!-- end main -->
    </div> <!-- end content --> 
    <footer id="footer"><p>Copyright &copy; 2011</p></footer> <!-- end footer -->
</body>
</html>

script.js（本教程中的内容刚刚更改为$.getJSON("/content.php",... to $.getJSON(url+"/content.php",

// THIS IS WHERE THE MAGIC HAPPENS
    $(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(url+"/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');    
    }

我的content.php所有文件都与其他值相同。

{
"h2":"Home",
"title":"Home",
"article #articletext":"This is Home page"
}

1）我猜作者对每一页都没有content.php。我怎么把它放在一个？那可能吗？我甚至想知道我的content.php看起来应该怎么做。如果我错了，请更正。

2）我想从content.php加载页面内容，有时内容会很长，它会包含很多div，所以我需要在文本中缩进，但我无法创建＆＃34;输入＆＃34;。我的意思是一切都必须在一条线上，否则它不起作用。显然它不清楚，以后编辑很难;怎么解决这个？（我觉得第一个问题的答案正是我要找的：P）我试图将"article #articletext":"<?php include('HomeContent.php'); ?>" instead of "article #articletext":"This is Home page"放在content.php文件中，但它不起作用，content.php加载都没有。

研究了这个论坛和互联网，但仍然没有解决方案，只是找到了类似的问题而没有答案......：＆lt;

Answer 1

为什么不使用jquery .load，然后从数据库动态加载你的内容？只需要一个content.php格式化你想要的格式，将城市作为查询字符串参数，并将正确的数据拉入格式化的content.php。那你就做了

<ul id="menu"> 
    <li><a href="/Try">Home</a></li>
    <li><a href="/Try/Seattle">Seattle</a></li>
    <li><a href="/Try/New York">New York</a></li>
    <li><a href="/Try/London">London</a></li>
</ul>

$('nav a').click(function(e) {
    $("#loading").show();
    href = $(this).attr("href");
    load_param = href.replace('/Try/',''); 
    $('#content_div').load('/content.php?city=' + load_param); // loads content into a div with the ID content_div

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

通过这种方式，您不必担心解析JSON或其他任何问题，并且一旦文档加载完毕，就会应用来自content.php的格式。

使用history.PushState（）进行jQuery导航

1 个答案: