Use your functions file to perform AJAX calls through Wordpress

front-end.html

<form class="ajax-example-form">
	<input type="text" class="message" />
	<input type="submit" />
</form>

<div class="example-response"></div>

functions.php

//Add this to functions.php
add_action('wp_ajax_nebula_example_ajax', 'nebula_example_ajax_function');
add_action('wp_ajax_nopriv_nebula_example_ajax', 'nebula_example_ajax_function');
function nebula_example_ajax_function() {
	echo 'Success! Your message was: "' . $_POST['data'][0]['message'] . '"';
	exit();
}

main.js

jQuery(document).on('submit', '.ajax-example-form', function(e){
	var messageData = [{
		'message': jQuery(".ajax-example-form input.message").val()
	}];
	jQuery.ajax({
		type: "POST",
		url: bloginfo["admin-ajax"], //bloginfo["admin-ajax"] is localized from functions.php
		data: {
			action: 'nebula_example_ajax',
			data: messageData,
		},
		success: function(response){
			jQuery('.example-response').css('border', '1px solid green').text(response);
		},
		error: function(MLHttpRequest, textStatus, errorThrown){
			jQuery('.example-response').css('border', '1px solid red').text('Error: ' + MLHttpRequest + ', ' + textStatus + ', ' + errorThrown);
		},
		timeout: 60000
	});
	e.preventDefault();
	return false;
});