Хобрук: Ваш путь к мастерству в программировании

Преобразование типов данных jQuery AJAX JSON

Надеюсь, это название не слишком загадочно. Что происходит, так это то, что у меня есть сценарий jQuery AJAX, который я пытаюсь использовать для доступа к API на удаленном сервере, который возвращает ответ JSON. Однако API возвращает JSON как тип MIME «text/html» (в заголовке ответа) вместо «application/json». Казалось бы очевидным, что мне просто нужно изменить возвращаемый тип контента с text на JSON, чтобы вызов AJAX правильно интерпретировал данные.

К сожалению, это не случай. Я пробовал это множеством разных способов, и все они терпят неудачу. Ближе всего к тому, чтобы заставить этот вызов API работать, я получил, когда отладчик сообщает мне: «Ресурс интерпретируется как сценарий, но передается с типом MIME text/html». И ошибки вызова AJAX выводятся с моим отладочным сообщением, которое выводит объект jqXHR в формате JSON, который говорит мне: {"readyState":4,"status":200,"statusText":"parsererror"}

Вот пример моего кода (хотя я изменил код разными способами, пытаясь заставить его работать, но эта версия кажется наиболее близкой к правильной):

$.ajax({
    type: 'GET',
    url: 'http://username:[email protected]/api/v1/projects.json',
    contentType: 'application/json',
    dataType: 'jsonp',
    converters: {
        'jsonp': jQuery.parseJSON,
    },
    success: function(data) {
        alert(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log(textStatus+': '+errorThrown);
    }
});

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

Также стоит отметить, что если вы скопируете или вставите URL-адрес API в адресную строку браузера и нажмете "Перейти", он даст правильный ответ JSON с правильным заголовком ответа ("application/json")

types jquery ajax jsonp
17.03.2011

  • Вы пытались просто установить dataType: "html", а затем успешно проанализировать его? 18.03.2011
  • Абсолютно. Если я это сделаю, я получу ошибку происхождения. Не забывайте, что это междоменный запрос, поэтому dataType в значительной степени должен быть jsonp или json с callback=? в URL-адресе, что просто заставляет jQuery автоматически конвертировать его в jsonp. Я также пытался добавить callback=?, в то время как dataType = html, но все равно не повезло. 18.03.2011
  • Можете ли вы опубликовать ответ, который отправляет ваш сервер? 28.03.2011

Ответы:


1

Поэтому, если Kanbanpad не обновит свой API, к нему нельзя будет получить прямой доступ с помощью JS. Вам придется использовать PHP (или что-то другое) для обработки запросов.

Он работает так же хорошо, просто требует дополнительного шага, вот и все.

Просто для тех, кто искал решение.

11.04.2011
  • Эта проблема связана с библиотекой JSON, а не с канбанпадом. 13.11.2012
  • ЛОЖЬ. Проблема СОСТОИТ в том, что Канбанпад использует JSON, который не является междоменным. Вот почему проксирование запросов через PHP необходимо. Они должны использовать JSONP или какой-либо другой API в стиле CORS, который упрощает междоменный XHR. 30.11.2012

    • 2 
        dataFilter(data, type)Function
    A function to be used to handle the raw response data of XMLHttpRequest.
This is a pre-filtering
function to sanitize the response. You should return the sanitized data. The function
accepts two arguments: The raw data returned from the server and the 'dataType' parameter.

    Я бы изменил тип контента в перехватчике dataFilter на json. Имейте в виду, что это влияет на все вызовы ajax, поэтому используйте информацию из data, чтобы решить, какие из них вы хотите преобразовать.

    17.03.2011
  • Я попытался добавить dataFilter: function(data, type) { return JSON.stringify(data); }, в вызов AJAX, но все равно получаю ту же ошибку типа MIME. 18.03.2011

    • 3

    Убедитесь, что ваш сервер отправляет ответ jsonp. Это означает, что json должен быть заключен в строку вашего обратного вызова.

    Имя обратного вызова передается в параметрах, и если вы не задали его явно, оно выглядит примерно так: jQuery15102810791094068532_1300988427891 (согласно http://www.json-p.org/)

    На вашем сервере вам нужно отформатировать ответ:

    jQuery15102810791094068532_1300988427891({...json response ...});

    Где вы используете обратный вызов, определенный в вашем параметре GET «обратный вызов».

    Вы можете попробовать установить тип «json» и посмотреть, работает ли он. У меня было несколько ошибок синтаксического анализа с jsonp jquery - вы можете попробовать http://code.google.com/p/jquery-jsonp, пока он не станет более гладким.

    24.03.2011
  • Спасибо за готовый ответ. Пожалуйста, внимательно прочитайте вопрос, прежде чем отвечать. 27.03.2011
  • @theRealKlanni - это не был готовый ответ - для вашего типа данных установлено значение «jsonp», а не «json». Если вы возвращаете только json, ваш сервер не отправляет jsonp... что вызовет ошибку, которую вы получаете. Текст, который вы должны вернуть, должен выглядеть так: функция mycallback({параметр1: 0, параметр2: 1}) ... если он возвращает текст типа {параметр1: 0, параметр2: 1} - тогда ваш сервер должен добавить функцию mycallback к вашему отклик. 28.03.2011
  • Можете ли вы изменить ответ со стороны сервера? 28.03.2011
  • Если вы не можете изменить ответ со стороны сервера, вам нужен другой способ обойти политику того же происхождения... вы можете написать небольшой php-скрипт локально на локальном сервере вашего веб-сайта, который получит json и передаст его обратно в ваша веб-страница. 28.03.2011
  • Я подумывал об этом. Я попробую. Спасибо. 07.04.2011

    • 4

    Попробуйте изменить тип контента на этот

                    contentType: "application/json; charset=utf-8",
    18.03.2011
  • Это не имеет значения. Я даже не знаю, почему ты думаешь, что это поможет. 18.03.2011
    • Новые материалы
    Еженедельный выпуск React 75
    Добро пожаловать в 75-й выпуск React Weekly, еженедельный обзор последних ссылок и руководств по React и React Native. Посетите Купить кофе , чтобы найти способы поддержать React Weekly, или..
    (Почти) полнофункциональная реализация Gumbel MuZero в Джулии.
    TLDR; Gumbel Muzero — это современный алгоритм обучения с подкреплением. Он достиг сверхчеловеческой производительности во многих настольных играх и даже, что более впечатляюще, в Atari..
    Передача нейронного стиля в браузерах с использованием Angular и WebDNN
    В последние годы глубокое обучение привлекло большое внимание из-за его безупречной производительности при обучении на обширных данных и высокой точности при выводе. Развертывание этих алгоритмов..
    Шифр Цезаря в C
    Шифр Цезаря  — один из самых простых и широко известных методов шифрования. Он включает в себя сдвиг каждой буквы в сообщении на определенное количество позиций в алфавите. В этой статье мы..
    Исследовательский анализ данных (EDA)
    Что такое ЭДА? Анализ данных, который ищет закономерности в данных, известен как исследовательский анализ данных. Это похоже на беглый просмотр данных, чтобы найти наиболее важные..
    1x1 Convolution: демистификация
    Чтобы пролить свет на концепцию операции свертки 1x1, которая представлена ​​в статье «Сеть в сети» Лин и др. и Google Inception Некоторое время назад я прочитал статью «Сеть в сети» (NiN),..
    Лучшие расширения VS Code в 2022 году
    Код ВС Лучшие расширения VS Code в 2022 году Список самых полезных расширений VS Code, которые вы можете использовать как разработчик в 2022 году Расширения находятся на рынке VS Code,..