使用 ajax 通过 post-ID 更改 wordpress 中 div 内的 the_content() 内容

Posted

技术标签:

【中文标题】使用 ajax 通过 post-ID 更改 wordpress 中 div 内的 the_content() 内容【英文标题】:Change the_content() content inside a div in wordpress by post-ID with ajax 【发布时间】:2021-11-14 01:24:05 【问题描述】:

我正在尝试通过带有 ajax 的 post-id 更改模态框内的内容。

我对 ajax 的了解非常有限,并且仍在学习..

所以我设法加载了 ajax 脚本,但是当我打开模式时,我会同时从所有帖子中获取内容,而不是每个帖子都单独获取内容。 我想要实现的是使用 ajax 快速查看帖子, 如何使用带有 ID 的 rel 属性来更改模态框内的 the_content() 内容?

在帖子循环中,我有一个带有动态帖子 ID 的按钮:

<a href="#" rel="<?php the_ID(); ?>" class="btn btn-primary post-link" data-bs-toggle="modal" data-bs-target="#myModal">
                QUICK VIEW
</a>

模态:

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div id="the-post-content" class="modal-content">


      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CLOSE</button>
      </div>
    </div>
  </div>
</div>

在function.php中:

add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );

function load_post_content() 

    $the_post_id = $_POST['the_ID'];
    $args = array(
        'post_type' => 'post',
        'p' => $the_post_id
    );
    $ajax_query = new WP_Query($args);
    $the_content;

    if ( $ajax_query->have_posts() ) : while ( $ajax_query->have_posts() ) : $ajax_query->the_post();
    $the_content = the_content();
    endwhile;
    endif; 

    echo $the_content;

    wp_reset_postdata();
    die();


function enqueue_jquery_ajax()
    ?>
<script>
jQuery(document).ready(function()
jQuery(".post-link").click(function()
    var post_id = jQuery(this).data('id');
    var ajaxurl = 'http://my-domain.com/wp-admin/admin-ajax.php';
    jQuery.post(
        ajaxurl,
        
            'url': ajaxurl,
            'action': 'load_post_content',
            'the_ID': post_id
        ,
        function(response)
            jQuery('#the-post-content').html(response);
        
    );

    return false;
);
);
</script>
<?php

add_action('wp_enqueue_scripts','enqueue_jquery_ajax', 99);

顺便说一句。我知道我应该本地化脚本,但现在我只想让它工作..

【问题讨论】:

【参考方案1】:

更新:用这个函数替换你的 load_post_content 函数:

function load_post_content()       
    $content_post = get_post($_POST['the_ID']);     
    $the_content = $content_post->post_content;     
    $the_content = apply_filters('the_content', $the_content);     
    $the_content = str_replace(']]>', ']]&gt;', $the_content);      
    $title = get_the_title($content_post); // Title     
    $thumbnail = get_the_post_thumbnail($content_post); // Thumbnail   
    /* if you want display title and thubnails */
    $the_content = $title.$thumbnail.$the_content;

    print($the_content);      
    wp_reset_postdata();     
    die(); 

【讨论】:

谢谢!它正在工作。但现在它给了我循环中的相关内容(相同的内容,3 次,作为页面/循环中的帖子数)。你觉得我应该怎么做? 更新:我添加到查询'posts_per_page' => 1 现在效果很好!不知道这是不是一种不好的做法/ 该功能只在帖子有子或所有帖子中给你重复3次?? 你在帖子里有孩子是什么意思?在类别页面中,当我使用创建的快速视图打开模式时,我在 3 个单独的

元素中打印了 3 次相同的内容。为什么是3?因为那是我猜该类别中的帖子数

你会从你的函数中删除 while 吗??

以上是关于使用 ajax 通过 post-ID 更改 wordpress 中 div 内的 the_content() 内容的主要内容,如果未能解决你的问题,请参考以下文章

使用 WordPress REST API 通过 AJAX 更改密码

通过 Ajax Post 使用模型更改更新视图 - MVC3

如何通过 URL 更改而不是页面重定向进行 ajax 加载?

通过 ajax 更改页面时如何运行 Greasemonkey 脚本?

如何通过ajax更改元素中的文本?

是否可以通过 Ajax 更改页面源内容变量