Handling form using AJAX in WordPress

<form name='sample_form' method='post' id='sample_form'>
    <p>
	    <label for="user_name">User name</label>
	    <input type='text' name="user_name" />
    </p>
    <p>
	    <input type='submit' class='button' value='submit' />
	    <input type="hidden" name="action" value="prefix_your_action_name">
	    <?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>	
    </p>
</form>

<script type="text/javascript" >
	(function($, window, document) {
		$('#sample_form').submit(function(e){
			e.preventDefault();
			var formData = $(this).serializeArray();
			$.ajax({
				type: 'POST',
				url : ajaxurl, // `ajaxurl` only available in admin end
				data: formData,
				beforeSend : function(){
					// action before submit
				},
				success: function(response){
					// On success
				},
				error: function(jqXHR, textStatus, errorThrown){
					// On error
				},
				complete: function(jqXHR, textStatus){
					// On complete
				}
			});
		});
	}(window.jQuery, window, document));
</script>

// Fires authenticated Ajax actions for logged-in users.
add_action( 'wp_ajax_prefix_your_action_name', 'your_callback_function' );

// Fires non-authenticated Ajax actions for logged-out users.
add_action( 'wp_ajax_nopriv_prefix_your_action_name', 'your_callback_function' );

function your_callback_function(){
    if(!isset($_REQUEST['name_of_nonce_field']) || !(wp_verify_nonce($_REQUEST['name_of_nonce_field'], 'name_of_my_action'))){
       wp_die('error!');
    }else{
       // process form data
    }

    wp_send_json($your_result);
}