How to wp_query posts with ajax

I have a nav bar with categories in it. When I hover over a category I want to query the 3 most recent post using ajax.

html mark up

<ul>
    <li id="alabama">Alabama</li>
    <li id="banana">Banana</li>
    <li id="bible">Bible</li>

</ul> 

<div id="main"></div>

ajax call

$( "#alabama" ).click(function() {
 var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
      $.post(
          ajaxurl, 
          {
              'action'  :   'fetch_posts',
              'fetch' :   'alabama',
          }, 
          function(output){
            $('#main').html(output);
          });
});
enter code here

php in functions.php

function import_post() {
    if($_REQUEST['fetch'] == 'alabama'){
        $query_args = array(
                'post_type' => 'post',
                      'tax_query' => array(
                      'relation' => 'AND',
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                              'terms'    => array( 'news' ),

                          ),
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                                  'terms'    => array( 'alabama' ),
                          ),
                      ),
            );
            $the_query = new WP_Query( $query_args ); 

        if ( $the_query->have_posts() ) :
             while ( $the_query->have_posts() ) : $the_query->the_post();
                $return_str.= '<div class="col-md-3">';
                $return_str.= '<li>' . get_the_title() . '</li>';
                $return_str.='</div>';
            endwhile;
            wp_reset_postdata();
            else :
                $return_str.= 'No posts found';
        endif;
    } 


    echo $return_str;
    die;
}



add_action('wp_ajax_fetch_posts', 'fetch_posts');

add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts');

I would like to make a series of comments, but the overall length would be too long for a comment, so I have to write an answer.

1. You should state what is working and what is failing, and tell us what you have tried to get it working. Looking at your code is too general.

2. In wordpress, the jQuery alias $ generally does not work. However, if you have the Developer Tools console open, you should get an error message. I always use jQuery instead of $ just to avoid stupid errors.

3. You state you would like to hover over a category, but your trigger is on click.

   $( "#alabama" ).click(function() {

   If you are not getting any hover behavior, try clicking.

4. Your AJAX call looks all right, though the call back function seems to be putting the data in the wrong location. If you want the query to happen on a hover, shouldn’t the output go into a tooltip?

5. The action in the AJAX call is to fetch_posts but your PHP function is called import_post. These two functions need to be identical for AJAX to work.

6. Your PHP function uses the $_REQUEST[] variable. Since you are sending the AJAX via POST, then you can use the $_POST[] variable. It probably won’t break or fix anything to change, but to me it makes more sense (the code is more readable).

7. When I develop an AJAX call, I set up the jQuery AJAX call, like you have. Then I create the PHP function that handles the AJAX call. First, I just echo the data I sent via AJAX. Once I know that works, then I write the SQL, echo that to make sure there are no syntax errors. At that point, I grab the data I want and send it back. The last step is to properly display the data in the AJAX callback function.

OK, there’s your AJAX tutorial. Hope it helps.