Ajax call through admin-ajax.php returns 404 error

Question

I am trying to do a pretty basic AJAX request at the moment, just to test functionality, routing my calls through admin-ajax.php. However, every time I try to fire the AJAX request, I get a 404 error that says "Uncaught syntaxerror: Unexpected token <". Wtf? It appears to be doing this because of the carot in my DTD... I've been through my code but can't figure out what I'm doing wrong here...I'm fairly new to working with AJAX so any help would be appreciated.

The php in functions.php is nothing...

function shows_callback(){
    echo '<h1>Test</h1>';
}

The ajax call...

    $(".tabs .btn").click(function(e) {
        e.preventDefault();
        $.ajax({
            url:"/wp-admin/admin-ajax.php",
            type: "GET",
            dataType: "html",
            cache: false,
            data: {
                action: "shows"
        },
            success: function(resp) {
                $(".ajax-show").append(resp);

            },
            error: function(xhr, status, error){
                var err = JSON.parse(xhr.responseText);
                console.log(err);
            }
        });
    });

What could I be doing wrong here?

EDIT: The full error:

Uncaught SyntaxError: Unexpected token <

Which I figure is related to the dataType, but I've declared html, so I don't understand...

Answer 1

success and error are functions, not properties of AJAX function. Working code:

$(".tabs .btn").click(function(e) {
    e.preventDefault();
    $.ajax({
        url:"/wp-admin/admin-ajax.php",
        type: "GET",
        dataType: "html",
        cache: false,
        data: {
            action: "shows"
        }
    })
    .success(function(resp) {
        $(".ajax-show").append(resp);
    })
    .error(function(xhr, status, error) {
        var err = JSON.parse(xhr.responseText);
        console.log(err);
    });
}); 

Also that should be noted:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Answer 2

Make sure you set your

define( 'WP_DEBUG', false );

Else the notices and possible errors may cause 404.