title: Returning JSON data with ajax in wordpress
body: <p>Ok so a fairly long question here. I'm fairly new to AJAX and especially using it in the context of WordPress, but I've been following along some tutorials online and I think I'm almost there.</p>
  
  <p>I'll paste what I have so far and explain my thinking.</p>
  
  <p>Ok so to start, the JS.</p>
  
  <pre><code>jQuery(document).ready(function(){
       jQuery('.gadgets-menu').mouseenter(function(){
  
            doAjaxRequest();
       });
  });
  </code></pre>
  
  <p>Mouse enters .gadgets-menu and the request triggers, using mouseenter so it fires once.</p>
  
  <p>The request itself.</p>
  
  <pre><code>function doAjaxRequest(){
       // here is where the request will happen
       jQuery.ajax({
            url: 'http://www.mysite.com/wp-admin/admin-ajax.php',
            data:{
                 'action':'do_ajax',
                 'fn':'get_latest_posts',
                 'count':5
                 },
            dataType: 'JSON',
            success:function(data){
                  //Here is what I don't know what to do.                 
  
                               },
            error: function(errorThrown){
                 alert('error');
                 console.log(errorThrown);
            }
  
  
       });
  
  } 
  </code></pre>
  
  <p>Now the php function.</p>
  
  <pre><code>add_action('wp_ajax_nopriv_do_ajax', 'our_ajax_function');
  add_action('wp_ajax_do_ajax', 'our_ajax_function');
  function our_ajax_function(){
  
  
       switch($_REQUEST['fn']){
            case 'get_latest_posts':
                 $output = ajax_get_latest_posts($_REQUEST['count']);
            break;
            default:
                $output = 'No function specified, check your jQuery.ajax() call';
            break;
  
       }
  
  
           $output=json_encode($output);
           if(is_array($output)){
          print_r($output);   
           }
           else{
          echo $output;
           }
           die;
  }
  </code></pre>
  
  <p>And the ajax_get_latest_posts function</p>
  
  <pre><code>function ajax_get_latest_posts($count){
       $posts = get_posts('numberposts='.'&amp;category=20'.$count);
  
       return $posts;
  }
  </code></pre>
  
  <p>So, if I've done this right the output should be <code>$posts = get_posts('numberposts='.'&amp;category=20'.$count);</code> ie. the number of posts (5), from category 20.
  I don't know what to do with that now, how do I get the title and the thumbnail? </p>
  
  <p>I'm sorry if this is silly, I'm just fumbling around here. </p>
  
  <p>Amended php</p>
  
  <pre><code>add_action('wp_ajax_nopriv_do_ajax', 'our_ajax_function');
  add_action('wp_ajax_do_ajax', 'our_ajax_function');
  function our_ajax_function(){
  
  
        $output = ajax_get_latest_posts($_REQUEST['count']); // or $_GET['count']
      if($output) {
          echo json_encode(array('success' =&gt; true, 'result' =&gt; $output));
      }
      else {
          wp_send_json_error(); // {"success":false}
          // Similar to, echo json_encode(array("success" =&gt; false));
          // or you can use, something like -
          // echo json_encode(array('success' =&gt; false, 'message' =&gt; 'Not found!'));
      } 
  
           $output=json_encode($output);
           if(is_array($output)){
          print_r($output);   
           }
           else{
          echo $output;
           }
           die;
  }
  
  
  function ajax_get_latest_posts($count)
  {
      $args = array( 'numberposts' =&gt; $count, 'order' =&gt; 'DESC','category' =&gt; 20 );
      $post = wp_get_recent_posts( $args );
      if( count($post) ) {
          return $post;
      }
      return false;
  }
  </code></pre>
  
  <p>This does not work.</p>
  
  <pre><code>jQuery(document).ready(function(){
       jQuery('.gadgets-menu').mouseenter(function(){
  
            doAjaxRequest();
       });
  });
  function doAjaxRequest(){
       // here is where the request will happen
       jQuery.ajax({
            url: 'http://localhost:8888/wp-admin/admin-ajax.php',
            data:{
                 'action':'do_ajax',
                 'fn':'get_latest_posts',
                 'count':5
                 },
            dataType: 'JSON',
            success:function(data){
              if(data.success) {
                 alert("It works");
  
  
                          }
              else {
                  // alert(data.message); // or whatever...
              }
          }
  
  
       });
  
  } 
  </code></pre>
  
  <p>No alert is shown.</p>