HTML 格式在 jquery ajax 响应中不正确

Question

我尝试使用 jQuery ajax 调用获得响应，但 HTML div 在 WordPress 的 ajax 响应中没有返回。

以下是我的 HTML

<form action="" name="article_search" id="article_search">
                  <input type="search" name="search_article_post" class="form-control search_article_post" placeholder="search">
                  <button type="button" name="search_article" class="project-search-icon  search_article">
                    <img src="<?php echo THEME_DIR; ?>/images/project-search-icon.png">
                  </button>
                </form>
<div class="testimonials-slider"></div> // Ajax output display in this div

以下是我的 ajax 调用。

 jQuery(document).ready(function(){
    jQuery(".search_article").on("click",function(){
        var search_by_name = jQuery('.search_article_post').val();        
        var data = {
              action: 'get_articles_details',            
              search_by_name:search_by_name
          };


        var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";

          jQuery.ajax({
              method: 'post',
              url:ajaxurl,
              dataType: "html",
              data: data,

              beforeSend: function (response) {
                  jQuery("#loading").show();
              },
              complete: function (response) {
                  jQuery("#loading").hide();
              },

              success: function (response) {
                jQuery('.testimonials-slider').html(response);
                console.log(response)
              },
          });


          return false;
      });
  });

以下脚本是用 functions.php 在 wordpress 主题中编写的，用于 ajax 调用

add_action('wp_ajax_get_articles_details' , 'get_articles_details');
add_action('wp_ajax_nopriv_get_articles_details', 'get_articles_details');

function get_articles_details(){

    $serch_by_name = isset($_POST['search_by_name']) && !empty($_POST['search_by_name']) ? $_POST['search_by_name'] : '';

    $post_arg =array( 'posts_per_page' => -1,
                        's' => esc_attr( $serch_by_name ),
                        'post_type' => 'post',
                        'orderby' =>$serch_by_name,
                        'order'=>'desc'
                    );
    $get_articles = new WP_Query($post_arg);
    global $post;
    if($get_articles->have_posts()){
        while($get_articles->have_posts()) : $get_articles->the_post();         
            $html .='<div class="slider-content"><div class="article-content bg-white">';
            $html .='<div class="article-img">'.the_post_thumbnail().'</div>';
            $html .='</div></div>';
        ?>
        <?php
        endwhile;
    }

    echo $html;
}

我得到以下输出

<img width="481" height="321" src="image_path" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="image_path" sizes="(max-width: 481px) 100vw, 481px" />
<div class="slider-content"><div class="article-content bg-white"><div class="article-img"></div></div>

我的意思是图像没有添加到 div 类article-img 它是在课前添加的。所以响应 HTML 不正确可能会丢失一些东西。

Answer 1

你需要写

echo json_encode($html);exit;

或

echo $html;exit