用更新的URL通过AJAX在隐藏的div中加载帖子?

时间:2015-01-04 作者:Desi

我使用下面的代码通过AJAX异步加载同一索引页上的帖子。我也希望能够更新URL,但不确定如何将其添加到我当前拥有的内容中。

最终目标的效果类似于this. 如果你点击一篇文章,你将能够看到上面隐藏的div中加载的文章,并且你会看到地址栏中的URL也会更新。

谁能帮帮我吗?

Index Template

<div id="single-post-container"></div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

       <?php the_title(); ?> 

    </a>

<?php endwhile; endif; ?>

Single Post Template

<?php

    $post = get_post($_POST[\'id\']);

?>
    <div id="single-post post-<?php the_ID(); ?>">

    <?php while (have_posts()) : the_post(); ?>

                <?php the_title();?>

                <?php the_content();?>

    <?php endwhile;?> 

    </div>

jQuery

   $(document).ready(function(){

        $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
            var post_link = $(this).attr("href");

            $("#single-post-container").html("content loading");
            $("#single-post-container").load(post_link);
        return false;
        });

    });
编辑:另外,我从一些资料中了解到,使用WordPress“内置”admin-ajax.php 已推荐。使用admin-ajax.php 如果是这样的话,我将如何用我目前拥有的东西“把它换掉”?

更新(2015年1月4日):


Index Template

<div id="project-container"></div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

       <?php the_title(); ?> 

    </a>

<?php endwhile; endif; ?>

Single Post Template

<div id="single-post post-<?php the_ID(); ?>">

<?php while (have_posts()) : the_post(); ?>

    <?php the_title();?>

    <?php the_content();?>

<?php endwhile;?> 

</div>
   $(document).ready(function(){

        $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
            var post_link = $(this).attr("href");

            $("#single-post-container").html("content loading");
            $("#single-post-container").load(post_link);
        return false;
        });

    });

jQuery (includes.js)

// Load posts via AJAX
(function($, D){

$.ajaxSetup({cache:false});

    $(".post-link").click(function(){

        var postID = $(this).attr(\'rel\');
        var $container = $("#project-container");
        $container.html("content loading");
        $.get(D.ajaxurl, {action: \'load-single-post\', pID: postID}, function(content) {
          $container.html(content);
        });

    });

})(jQuery, site);

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

通过javascript更新url与WordPress无关,但是您只需要修改window.location.hash 在jQuery代码中。

关于admin-ajax.php 建议通过AJAX执行需要加载WordPress环境的任务,而不是手动执行wp-load.php.

在您的情况下,您正在向常规WordPress url发送请求,所以这并不太糟糕,但是您当前的代码有一些问题。

“The”$_POST[\'id\']“在您的单数帖子中发布

$post = get_post($_POST[\'id\']);
这一点都不需要,因为您正在向单个post url发送请求,这意味着post变量是由WordPress自动设置的。

此外$_POST[\'id\'] 可能未设置,尤其是如果您使用了相当长的永久链接,这将导致抛出PHP警告。

“单一视图”问题

你的单篇文章仍然有自己的永久链接。如果您访问其中一个永久链接,您将看到一个不包含任何<html>, <head><body> 标记,但仅限于页面的内容。

您可以通过两种方式解决此问题:

使用\'post_link\' 钩子可以更改帖子的永久链接,使其指向具有适当哈希的索引页,还可以设置重定向,将在地址栏中输入单数url的用户发送到具有适当哈希的索引页。这可能很好,但这样一来,你的帖子就永远不会被人们以单一的视角看待。

第二种方法是编辑单个帖子模板,并在页面以常规(即非AJAX)请求加载时有条件地输出适当的html标记。

function is_ajax() {
  return isset($_SERVER[\'HTTP_X_REQUESTED_WITH\'])
         && strtolower($_SERVER[\'HTTP_X_REQUESTED_WITH\']) == \'xmlhttprequest\';
}

if (is_ajax()) {
   // open here <html>, <head> and <body> tags
}

// page content here

if (is_ajax()) {
   // close here <html>, <head> and <body> tags
}
这样,当使用常规请求进行请求时,您的帖子将显示在格式良好的html页面中。

性能影响

使用上面建议的两种方法之一,您可以解决当前代码的主要问题,但仍然存在性能问题。

对WordPress URL的请求在性能上比对admin-ajax.php. 即使两者都加载了完整的WP环境,对于常规请求,WordPress也需要将永久链接解析为查询。这就是从数据库加载一组重写规则,并以编程方式对任何规则执行正则表达式检查,直到其中一个规则与当前url匹配为止。

如果您可以发送一个包含post ID的ajax请求作为请求本身的一部分,那么您将能够输出跳过该检查的post内容,从而提高性能。

要获得该值,您应该使用WordPress AJAX API. 类似于:

在中functions.php

add_action(\'wp_enqueue_scripts\', function() {
  // $script_url is the full url to your js file
  wp_enqueue_script(\'myjs\', $script_url, array(\'jquery\'), true, null, true);
  wp_localize_script(\'myjs\', \'myData\', array(\'ajaxurl\' => admin_url(\'admin-ajax.php));
});

add_action(\'wp_ajax_load-single-post\', \'prefix_ajax_single_post\');
add_action(\'wp_ajax_nopriv_load-single-post\', \'prefix_ajax_single_post\');

function prefix_ajax_single_post() {
  $pid = (int) filter_input(INPUT_GET, \'pID\', FILTSER_SANITIZE_NUMBER_INT);
  if ($pid > 0) {
    global $post;
    $post = get_post($pid);
    setup_postdata($post);
    printf(\'<div id="single-post post-%d">\', $pid);
    the_title();
    the_content();
    echo \'</div>\';
  }
  exit();
}
jQuery(位于url为$script_url 上述代码中的var)
(function($, D){

  $.ajaxSetup({cache:false});

  $(".post-link").click(function(){

    var postID = $(this).attr(\'rel\');
    var $container = $("#single-post-container");
    $container.html("content loading");
    $.get(D.ajaxurl, {action: \'load-single-post\', pID: postID}, function(content) {
      $container.html(content);
    });

  });

})(jQuery, myData);
索引模板代码可以保持不变。

使用这种方法可以解决所有问题,并且正如您所看到的,完全不涉及单个帖子模板,这意味着您可以使用它来显示您喜欢的单个帖子视图。(如果你不想看到任何单一的帖子,那么The "Single View" Issue 可以继续使用)。

结束

相关推荐

如何使用SHORTINIT声明AJAX函数

我尝试使用SHORTINIT 在我的wordpress中,我希望更快地执行Ajax,但我尝试声明我的函数,并且不返回任何值。我的代码是:define(\'SHORTINIT\',true); require_once (\'../../../../wp-load.php\'); require_once (\'../../../../wp-config.php\'); function muestraMensaje_callback(){ echo \"h