HTML format not getting proper in jquery ajax response - php

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