В этой записи я хочу рассказать про данную ошибку и из-за чего она может проявляться.

Чаще всего

Давайте представим обычный AJAX запрос. В целом, я думаю, что всем понятно что это из-за себя представляет. Вы указываете путь к файлу обработчика данный и пишите в каком формате вы хотите получить данные обратно. Для более точного разъяснения проблемы, я написал небольшой пример AJAX запроса, который указан ниже.

Простой пример

В примере ниже, я использую POST запрос, к файлу по пути ajax/ajax-form.php. Ответ я ожидаю в формате JSON. Я отправляю данные в виде, {key:1,title:'nice title'}, при удачном получении данных, сработает success, а при ошибке error. При success или error ответ будет показан в консоли браузера.

$.ajax({
            type : 'POST',
            url : 'ajax/ajax-form.php',
            dataType : 'json',
            data: {key:1,title:'nice title'},
            success : function(data){
                 console.log('data');
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {    
                 console.log("XMLHttpRequest " + XMLHttpRequest[0]);alert(" errorThrown: " + errorThrown);
                 console.log( " textstatus : " + textStatus);    
            }
});

Сама частая причина возникновения ошибки Syntax error: unexpected token < — это когда вы делаете AJAX запрос к обработчику (например — ajax/ajax-form.php из примера выше), а его нет по указанному пути (ajax/имя-файла.php) и в итоге возвращается 404 ошибка (не найдено).

404 ошибка, вернет вам <html></html> (HTML формат), а скриптом ожидается JSON dataType: 'json' и поэтому возникает такая ошибка.

Возможное решение (первое)

Проверьте правильно ли прописан путь и/или имя файла обработчика.

Возможное решение (второе)

Возможно вы не правильно возвращаете ответ со стороны обработчика, например вы прописали JSON, а возвращается в HTML или наоборот.

Так же ошибка возникает бывает…

Если вы 100% уверены в том, что ошибка не происходит из-за того, что вы неправильно прописали путь для обработчика — то второй причиной возникновения ошибки может быть синтаксическая ошибка.

Например если вы пропустили «;» или вместо type: "POST" указали type "POST". Постарайтесь внимательно пройтись по коду и если ошибок все равно нет, то оставьте его на некоторое время и чуть позже вернитесь к нему.

Личный опыт

Я сам очень часто при первоначальном взгляде на код не вижу в нем никаких ошибок — он мне кажется идеальным. Через некоторое время когда я возвращаюсь к нему, чтобы снова просмотреть все на свежую голову.

И да, после вторичного просмотра кода я вношу массу поправок и исправляю ошибки (если они были).