Unexpected token ':'. Parse error. in AJAX response

Question

My Ajax request code:

$(window).ready(function () {
    var $form = $(document).find('#name-form');
    var $display = $(document).find('#display');
    $form.on('submit', function (e) {
        e.preventDefault();
        var name = $form.find('#name').val();
        var surname = $form.find('#surname').val();
        var patronymic = $form.find('#patronymic').val();
        var year = $form.find('#year').val();
        var request = $.ajax({
            headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
            },
            dataType: 'jsonp',
            method: 'get',
            jsonp: false,
            jsonpCallback: "localJsonpCallback",
            url: 'http://127.0.0.1:8885/search?app=potato',
            data : {
                name: name,
                surname: surname,
                patronymic: patronymic,
                year: year,
            }
        });
     function localJsonpCallback(json) {
            if (!json.Error) {
                $('#display').submit();
            }
            else {
                $('#display').show();
                alert(json.Message);
            }
        }
    });
});

This code sends the request, this is for sure. But when it gets the JSON, console writes an error Unexpected token ':'. Parse error. Unexpected token ':'. Parse error. All I need is to simply show this json or it's content in a div.

The response JSON is:

{
  "Report": "http://127.0.0.1:8099/chicken/eggs.html",
  "Exist": true
}

What is the problem?

Answer 1

You're telling jQuery that you want JSONP but the server is returning JSON.

Due to how jQuery handles JSONP, the normal JSON is treated as though it's javascript and so the error you're getting is actually a syntax error thrown by the browser's javascript interpreter.