This AJAX Code Doesn’t Work – Looking for elegant solution

Working Code Based On My Previous Answer

Without using nonce.. but you can check the previous answer on how you can implement a nonce check. And the code is based on your code.

misha_my_load_more_scripts() in functions.php

function misha_my_load_more_scripts() {
    wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js',
        array( 'jquery' ), '', true );
    wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );

misha_loadmore_ajax_handler() in functions.php

function misha_loadmore_ajax_handler() {
    $args = json_decode( wp_unslash( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // load the next page

    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) : $the_query->the_post();
            get_template_part( 'template-parts/post/content', get_post_format() );
        endwhile;
    endif;

    wp_die();
}
add_action( 'wp_ajax_loadmore', 'misha_loadmore_ajax_handler' );        // Authenticated users
add_action( 'wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler' ); // Non-authenticated users

front-page.php (the #main DIV)

$current_page = max( 1, get_query_var( 'paged' ) );
$the_query = new WP_Query( array(
    'cat'            => '-21',
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => $current_page,
) );

wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
    'ajaxurl'      => admin_url( 'admin-ajax.php', 'relative' ),
    'posts'        => json_encode( $the_query->query_vars ),
    'current_page' => $current_page,
    'max_page'     => $the_query->max_num_pages
) );
?>
    <div id="main" class="container-fluid">
        <?php
            if ( $the_query->have_posts() ) :
                while ( $the_query->have_posts() ) : $the_query->the_post();
                    // Should match the one in misha_loadmore_ajax_handler().
                    get_template_part( 'template-parts/post/content', get_post_format() );
                endwhile;
            endif;
        ?>
    </div>
<?php
wp_reset_postdata();

myloadmore.js and content.php

No changes.

UPDATE

Actually, in my code (the one I actually tested with), I don’t have the tax_query parameter, but I mistakenly included it in the above code in the previous version of this answer (not the other one on this page).

Because a tax_query like the following — which doesn’t specify the required terms parameter — would result in an 0 = 1 in the MySQL query, and eventually leads to no results (i.e. no posts):

$the_query = new WP_Query( array(
    ...
    'tax_query'      => array(
        array(
            'taxonomy' => 'topics',
            'operator' => 'NOT EXISTS',
            // missing the required 'terms' parameter
        ),
    ),
) );

So make certain to use tax_query with the proper parameters.

And you may also want to use/check my myloadmore.js script?