保存通过 Ajax 加载的内容的页面状态

Question

背景

每当单击项目链接时，我都会通过 Ajax 将我的项目（帖子）加载到首页上的 div 中。反应很好，我已经设法让pushState() 工作得很好。

问题

我在项目加载后保存状态时遇到问题。

加载项目时，URL 会从 example.com 更改为 example.com/title-of-post。我想保存项目加载时的状态（example.com/title-of-post），这样当用户在地址栏中输入example.com/title-of-post 时，页面会加载在div 中加载的项目。

注意：example.com/title-of-post 曾经重定向到 example.com/projects/title-of-post，但我做了一个 htaccess 重定向。

示例

This page 是我试图实现的一个很好的例子，尽管我不想在 url 中使用主题标签。请注意，当您访问该 url 时，相应的项目（迪拜）已被加载。

我做了什么（使用 History.js）

$('.post-link').on('click', function(e) {
    e.preventDefault();

    var post_id = $(this).data('id'),
        projectTitle = $(this).data('title'), 
        projectSlug = $(this).data('slug'), 
        ajaxURL = site.ajaxurl; 

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        context: this,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {

            // Load the response from the Ajax call
            $('#project-container').html(response);

            // Make history
            var stateDataObj = { project: projectSlug };
            History.pushState(stateDataObj, site.title, site.url + '/' + projectSlug);

            // Revert to our previously saved state
            History.Adapter.bind(window, 'statechange', function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                var stateDataObj = State.data;
                $(this).closest('#main').find('#project-container').html(response);
            });

            return false;
        }
    });
});

这是我的 WordPress 循环。

<div id="project-wrapper">
    <a href="#" class="close-button">&times;</a>
    <div id="project-container"></div>
</div>

<div id="projects-list">

<!-- Start the loop -->
<?php $home_query = new WP_Query('post_type=projects');

while($home_query->have_posts()) : $home_query->the_post(); ?>

    <article class="project">
        <?php the_post_thumbnail( 'home-thumb' ); ?>
        <div class="overlay">
            <a class="post-link expand" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" data-slug="<?php global $post; echo $post->post_name; ?>">+</a>
        </div>
    </article>

<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>

</div><!-- #projects-list -->

Answer 1

查看问题所在的 url。它在浏览器加载之前解决，因此使用 url 位置而不是查询变量更加困难。

但是要做到这一点，使用排除主机名获取当前 url 使用 $_SERVER[REQUEST_URI] 然后你可以将它匹配到任何你想要加载的项目并使用 php 加载。

您需要执行的操作与重写规则稍有不同。在它尝试加载 url 并重定向到 frontpage 之前，您将需要一个连接到 init 的函数来捕获 url。您还需要通过会话或 cookie 传递 url 信息。

如果您只是使用查询变量?name=page，您可以跳过重定向等。您的保存状态将使用一个简单的 js 函数。希望我改变了你的想法:)