如何使用 Ajax onclick 加载 Wordpress Post

Posted 2023-05-08

【中文标题】如何使用 Ajax onclick 加载 Wordpress Post

【英文标题】：How to load Wordpress Post with Ajax onclick

【发布时间】：2013-03-02 09:17:07

【问题描述】：

我花了几个小时阅读和尝试教程。我似乎找不到有效的解决方案，而且我知道它应该很容易，但我在 AJAX 方面遇到了困难。 :(

我想从 div 中的链接加载帖子内容。 下面是我所拥有的。有人可以帮我处理 javascript 方面的问题吗？谢谢！

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

我想在 div #loadAjaxHere 中加载这段代码

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

谢谢你的帮助！！

【问题讨论】：

您使用什么来定义要检索的帖子？附加了点击功能的元素是什么？你熟悉functions.php文件吗？

您必须在 javascript 端包含 wp-blog-header.php。

尝试：$folder = substr(substr($_SERVER["REQUEST_URI"],1), 0, strpos(substr($_SERVER["REQUEST_URI"],1), "/")) ; $ajax_url = realpath($_SERVER["DOCUMENT_ROOT"]).'/'.$folder.'/wp-blog-header.php';需要（$ajax_url）；在您的外部 ajax 请求页面的顶部。

@Ohgodwhy 我要添加类似的内容： 到 .mytab 类

我基本上想使用 AJAX 加载单个帖子 onclick。谢谢！

【参考方案1】：

好的， 经过长时间的反复试验，我想我已经解决了这个问题。

这似乎可行，但如果这样做不正确，请告诉我

Javascript：

jQuery.noConflict();
jQuery(document).ready(function($)
    $.ajaxSetup(cache:false);
    $("a.ajax").click(function()
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    );
);

我要显示帖子内容的页面（我正在使用称为“艺术品”的自定义帖子类型：

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

还有单篇文章“single-artwork.php”。注意：不要使用 get_header 或 get_footer 等：

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

谢谢！

【参考方案2】：

只是补充一下，如果你只想加载单个帖子的一部分你可以修改

$("#tabs").load(post_url);

到

$("#tabs").load(post_url + ".tabcontent" );

这只会加载 div.tabcontent 中的所有内容

【讨论】：

在逗号和点之间使用空格... $("#tabs").load(post_url + '.tabcontent');

【参考方案3】：

关于能够通过在 URL 末尾添加 css 选择器表达式来加载部分页面的问题，Barry 的回答是正确的。但是，url 和选择器之间需要有一个空格，如下所示：

$("#tabs").load(post_url + " .tabcontent" );

否则传递给.load() 的字符串将是http://example.com.tabscontent。但应该是http://example.com .tabscontent。

另外，明智的说法是，使用此方法将阻止 jQuery 加载和执行 <script> 标签内的任何代码。但是，仅使用 .load(post_url); 而不使用选择器将成功加载并执行 <script> 标签中的代码。

阅读更多关于here的信息。