我通过Ajax将单个帖子加载到我在索引页面上设置的div中。在这方面一切正常。我想用历史。js推/弹出状态，因此如果用户输入example.com/my-post 在地址栏中，它加载索引页，其中包含已加载到div中的帖子。这就是问题所在。

This is a simplified version of the function I\'m using (the actual also includes a slide):

function my_load_ajax_content () {

    $args = array(
        \'p\' => $_POST[\'post_id\'],
        \'post_type\' => \'projects\'
        );

    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">
        <div id="project-content">
            <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
            <?php the_content(); ?>
        </div>
    </div><!-- .post-container -->

    <?php
    endwhile;
    wp_die();
}

add_action ( \'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\' );
add_action ( \'wp_ajax_load-content\', \'my_load_ajax_content\' );

This is how I\'m calling it:

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

    var post_id = $(this).data(\'id\'), // data-id attribute for .post-link
        projectTitle = $(this).data(\'title\'), // data-title attribute for .post-link
        projectSlug = $(this).data(\'slug\'), // data-slug attribute for .post-link
        ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

    $.ajax({
        type: \'POST\',
        url: ajaxURL,
        context: this,
        data: {\'action\': \'load-content\', post_id: post_id },
        success: function(response) {
            $(\'#project-container\').html(response);
            return false;
        }
    });
});

Here is 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 ?>

我想知道我是不是走错了路。我很困惑，我的一部分人在想，我应该把所有的html都放到我的single 模板并从Ajax函数调用它。但我也不知道这是怎么回事，因为如果用户输入example.com/my-post 在他们的浏览器中，它只会加载一篇文章，而不会加载索引页上的所有html。我希望我的解释是正确的。有人能告诉我怎么做吗？

   jQuery(document).ready(function($) {
    $.post(ajax_object.ajaxurl, {
        action: \'my_load_ajax_content \',            
        post_id: post_id  // << should grab this from input...

    }, function(data) {

        var $response   =   $(data);
        var postdata    =   $response.filter(\'#postdata\').html();

        $(\'.TARGETDIV\').html(postdata);
    });
});

function my_load_ajax_content () {

    $pid        = intval($_POST[\'post_id\']);
    $the_query  = new WP_Query(array(\'p\' => $pid));

    if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            $data = \'
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">\'.get_the_title().\'</h1>
                    <div class="entry-content">\'.get_the_content().\'</div>
                </div>
            </div>  
            \';

        }
    } 
    else {
        echo \'<div id="postdata">\'.__(\'Didnt find anything\', THEME_NAME).\'</div>\';
    }
    wp_reset_postdata();


    echo \'<div id="postdata">\'.$data.\'</div>\';
}

add_action ( \'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\' );
add_action ( \'wp_ajax_load-content\', \'my_load_ajax_content\' );

<button class="get_project" data-postid="POSTID HERE!">PROJECT NAME</button>

jQuery(function($){

    $(\'.get_project\').click(function() {

        var postid = $(this).attr(\'data-postid\');

        $.post(ajax_object.ajaxurl, {
            action: \'my_load_ajax_content \',            
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter(\'#postdata\').html();
            $(\'.TARGETDIV\').html(postdata);
        });

    })

});