How to load post in wordpress with ajax? - ajax

Question

This is my loop of posts:
<?php
$query_masonry = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 3
));
if ($query_masonry->have_posts()) :
while ($query_masonry->have_posts() ) : $query_masonry->the_post();
get_template_part( 'content', get_post_format() );
endwhile;
else :
get_template_part( 'content', 'none' );
endif;
wp_reset_postdata();
?>
at below, I have this:
<button id="load-more">Load more</button>
How I can load 3 more posts with ajax just clicking at the button "Load more"?
I've tried a lot of plugins, but unsuccessful.
Any one help me?

Answer 1

I want update my code, ajax load post with fetch api:
PHP code:
// Enqueue script.
wp_enqueue_script( 'ajax-load-post' );
wp_localize_script(
'ajax-load-post',
'ajax_load_post_data',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'ajax_nonce' => wp_create_nonce( 'ajax_load_post' ),
)
);
// Ajax handle.
add_action( 'wp_ajax_load_post', 'ajax_load_post' );
add_action( 'wp_ajax_nopriv_load_post', 'ajax_load_post' );
function ajax_load_post() {
check_ajax_referer( 'ajax_load_post', 'ajax_nonce' );
$post_query = new WP_Query(
array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 3,
)
);
ob_start();
if ( $post_query->have_posts() ) {
while ( $post_query->have_posts() ) {
$post_query->the_post();
echo get_the_title() . '<br>';
}
} else {
echo 'No posts found!';
}
$response['content'] = ob_get_clean();
wp_send_json_success( $response );
}
JS code:
// In js file.
document.addEventListener(
'load',
function() {
var data = {
action: 'load_post',
ajax_nonce: ajax_load_post_data.ajax_nonce,
};
data = new URLSearchParams( data ).toString();
var request = new Request(
ajax_load_post_data.ajax_url,
{
method: 'POST',
body: data,
credentials: 'same-origin',
headers: new Headers(
{
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
)
}
);
fetch( request )
.then(
function( res ) {
if ( 200 !== res.status ) {
console.log( 'Status Code: ' + res.status );
throw res;
}
return res.json();
}
).then(
function( json ) {
if ( ! json.success ) {
return;
}
console.log( 'Json data:', json.data );
}
).catch(
function( err ) {
console.log( err );
}
).finally(
function() {
console.log( 'All Done!' );
}
);
}
);