jQuery AJAX - Unexpected token + parsererror

Question

I wrote a script using jQuery and AJAX today, and I get some errors...

The script:

function changeAdmin(id) {
$(document).ready(function() {
    $('#ta-modarea-'+id).fadeOut('fast');
    $('#ta-m-loading-'+id).fadeIn('fast');

    $.ajax({
        type: 'POST',
        url: 'ajax_utf.php?a=changeteamadmin',
        dataType: 'json',
        data: {
            admin : $('#admin-id-'+id).val()
        },
        success: function(data) {
            $('#ta-m-loading-'+id).fadeOut('fast');
            $('#ta-modarea-'+id).text(data.msg).fadeIn('fast');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $('#ta-m-loading-'+id).fadeOut('fast');
            $('#ta-modarea-'+id).text('HTTP Error: '+errorThrown+' | Error Message: '+textStatus).fadeIn('fast');
        }
    });

    return false;
});
}

After the run, I get this error message: HTTP Error: SyntaxError: Unexpected token < | Error Message: parsererror

Could you help me, what should I do?

Answer 1

You need to send an application/json header via PHP , like this:

header('Content-type: application/json');

That's because jQuery sends an Accept header (application/json, text/javascript), and this is the cause of parseerror triggered by jqXHR.

Answer 2

Try

 alert( jqXHR.responseText);

in your error function

Answer 3

If you have tried setting the header content type and are still getting the error. It is my expectation that the server is replying with a fault from your server side code. Usually when a debug message is given it is in pure HTML not JSON thus the unexpected token.

The quickest way to debug this is to set the DataType of the HTML instead of JSON so that you can see whatever output there is from the server, not just JSON formatted data.

Once you have seen the error that is being produced by your server side code and fixed it, you can then return to being a DataType of JSON.

Answer 4

contentType: "application/json; charset=utf-8",

Answer 5

Try code below, but if you receive an error like "Unexpected token <", you need to check your php file - "ajax_utf.php" and check what is returned in browser (Chrome) View->Developer->Developer Tools, Network tab -> XHR.

         $.ajax({
                type: 'post',
                url: postLink,
                dataType: 'json',
                data: postData,

            beforeSend: function (x) {
                if (x && x.overrideMimeType) {
                    x.overrideMimeType('application/json;charset=UTF-8' );
                }
            },
            success: function (result) {
                //console.log(result);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(arguments);
            }
        });

Answer 6

It could be an issue with missmatching PHP associative/numeric arrays and Javascript objects.

Try this:

$data = new Array();
$data['test'][] = "Row 1";
$data['test'][] = "Row 2";
echo json_encode($json, JSON_FORCE_OBJECT);

This should force json encoder to always encode to objects instead of numeric arrays and may solve the problem.