Ajax return code 400

Question

I've never used ajax in wordpress before and I'm trying to make a simple ajax request by following some video tutorials on youtube but it always return this error message: Failed to load resource: the server responded with a status of 400 (Bad Request)

My javascript (inside my own template file):

jQuery.ajax({
                url: ajaxurl,
                type: "POST",
                dataType: 'json',
                data: {
                    action: 'my_action'
                },

                success: function ( response ) {
                    console.log("success");
                    alert("success");   
                },
                error: function( error ){
                    console.log("error");
                    alert("error");
                }
            });

my functions.php file:

<?php



add_action('wp_ajax_my_action', 'insertEmail');
add_action('wp_ajax_nopriv_my_action', 'insertEmail');

function insertEmail(){
  echo "<script> alert('functions fil'); </script>"
  die();
}

?>

Answer 1

Here's a base snippet I use for AJAX submits in Wordpress, it might help you out:

<?php
if (isset($_POST['my_theme_ajax_submit']))
    if ( wp_verify_nonce( $_POST['nonce'], 'my_theme_ajax_submit' ) )
        my_theme_ajax_submit(); 

function my_theme_ajax_submit() {
    // do something
    // some php code that fires from AJAX click of #fire
    wp_mail( '[email protected]', 'my_theme_ajax_submit() fired', time());
    wp_die();
}
?>

<button id='fire'>Fire Something</button>

<script>
    jQuery('#fire').click(function(){
        jQuery.ajax({
            type: 'post',
            data: { 
                "my_theme_ajax_submit": "now",
                "nonce" : "<?php echo wp_create_nonce( 'my_theme_ajax_submit' ); ?>"
            },
            success: function(response) { 
                jQuery('#fire').text("Somthing Done!");
            },
            error: function(response) { 
                jQuery('#fire').text("...error!");
            },
        });
    });
</script>

This can be built better - housing the scripts in wp_enque_script(), having the my_theme_ajax_submit() condition check / firing at an early hook like init (instead of within a template), or using the proper wp_ajax_(action) hooks (never seem to work for me) - but it should give an idea.