How to filter post data with AJAX on page?

As you guess that’s what happening(at least I think).

You should separate your ajax logic from your “first load” logic. You can make a function ie my_get_posts that will be called inside archive-work.php and then inside ajax_filter_get_posts you can call the my_get_posts() function.

archive-work.php

    <div class="work-results">
                    <?php $res = my_get_posts();
                 echo $res['response'];
?>
                </div>

functions.php

    function ajax_filter_get_posts( $work_item ) {

      // Verify nonce
      if( !isset( $_POST['afp_nonce'] ) || 
          !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ))
        die('Permission denied');

         $work_item = $_POST['stuff'];
         $result = json_encode(my_get_posts($work_item, true));
         echo $result;

         die();

    }

function my_get_posts($work_item = '', $ajax = false){

    // WP Query
      $args = array(
        'stuff' => $work_item,
        'post_type' => 'work',
        'posts_per_page' => -1,
      );

      // If taxonomy is not set, remove key from array and get all posts
      if( !$work_item ) {
        unset( $args['stuff'] );
      }

      $query = new WP_Query( $args );
      $html="";
      $items = array();

      if ( $query->have_posts() ) : 
           while ( $query->have_posts() ) : 
           $query->the_post(); 

           $res="<div class="col-lg-4">".
                      '<a href="'.get_permalink().'">'.
                          '<article class="panel panel-default" id="post-'.get_the_id().'">'.
                              '<div class="panel-body">'.
                                  get_the_post_thumbnail().
                                  '<div class="panel-cover">'.
                                      '<h3>'.get_the_title().'</h3>'.
                                          get_the_content().
                                  '</div>'.
                              '</div>'.      
                          '</article>'.
                      '</a>' .     
                  '</div>';


           $ajax ? $items[] = $res : $html .= $res;


       endwhile;

       $result['response'] = $ajax ? $items : $html;
       $result['status'] = 'success';

       else:
           $result['response'] = '<h2>No posts found</h2>';
           $result['status']   = '404';
       endif;
wp_reset_postdata();
return $result;
}

Also I don’t think the following code is needed as wordpress will take care of it.

// If taxonomy is not set, remove key from array and get all posts
          if( !$work_item ) {
            unset( $args['stuff'] );
          }

The code is a draft and could be better but you get the idea. Haven’t test it but it should work

EDIT

Don’t forget to call wp_reset_postdata(); after every custom WP_Query to restore the global $post variable. More here: http://codex.wordpress.org/Function_Reference/wp_reset_postdata