wordpress - loading post using ajax request js

/*
	* Load more post
	*/
	var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
	var page = 2;
	jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };
 
        $.post(ajaxurl, data, function(response) {
            $('.my-posts').append(response);
            page++;
        });
    });

wordpress - loadmore post using ajax request

/*
	* Loading post using ajax (loadmore)
	*/
	add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
	add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

	function load_posts_by_ajax_callback() {

	    check_ajax_referer('load_more_posts', 'security');
	    
	    $paged = $_POST['page'];

	    $args = array(
	        'post_type' => 'post',
	        'post_status' => 'publish',
	        'posts_per_page' => '4',
	        'paged' => $paged,
	    );
	    
	    $my_posts = new WP_Query( $args );
	    
	    if ( $my_posts->have_posts() ) : ?>
	    	
	        <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
	            <div class="gdc_row">
                	<div class="gdc_column gdc_cquarter">
                		<div class="gdc_inner">
                			<?php get_the_first_image(); ?>
                		</div>
                	</div>
                	<div class="gdc_column gdc_cthree-quarters">
                		<div class="gdc_inner">
                			<h2><a href="<?php echo get_permalink(); ?>"><?php the_title() ?></a></h2>
                			<div class="my-post-date"><?php echo get_the_date(); ?></div>
                			<?php echo wp_trim_words( get_the_content(), 30 ); ?>
                		</div>
                	</div>
                </div>
	        <?php endwhile ?>
	        <?php
	    endif;
	 
	    wp_die();
	}