HTML format not getting proper in jquery ajax response

Question

I have tried to get response using jQuery ajax call but HTML div is not return in ajax response in WordPress.

Following is my 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

Following is my ajax call.

 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;
      });
  });

Following script is written in functions.php in wordpress theme for ajax call

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;
}

I get following output

<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>

I mean image is not add in div class article-img it's added before class. so in response of HTML in not getting proper might be missing something.

Answer 1

You need to write

echo json_encode($html);exit;

or

echo $html;exit