Получите JSON файл из URL-адреса и отображения

Ответ 1

После стольких месяцев поиска я нашел решение. Поэтому я отвечаю на свой вопрос.

Когда JSON не поддерживается, и когда мы застреваем с той же политикой происхождения, мы должны обернуть вокруг нашего JSON дополнением и сделать его JSONP.

Для этого у нас есть ресурсосберегающий веб-сайт http://anyorigin.com/

Вы можете вставить свой URL-адрес и получить соответствующий код JQuery примерно так:

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){
$('#output').html(data.contents);
});

Если вы хотите использовать свой собственный код, просто используйте URL-адрес из приведенного выше кода, который

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?

Этот URL-адрес даст вам те же данные JSON, что и JSONP, и решает все проблемы.

Я использовал следующий код, который при успешном вызове функции displayAll

$.ajax({
        url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',
        type: 'GET',
        dataType: "json",
        success: displayAll
    });

function displayAll(data){
    alert(data);
}

Ответ 2

Если вы посмотрите в инспекторе Chrome, вы, вероятно, увидите эту ошибку:

XMLHttpRequest не может загрузить http://webapp.armadealo.com/home.json. Происхождение /fooobar.com/... не разрешено Access-Control-Allow-Origin.

Это означает, что сервер не хочет, чтобы страница клиента просматривала файл. Клиенту не доверяют. Это базовая функция безопасности XMLHttpRequest, чтобы предотвратить загрузку данных на mybank.evil.com с mybank.com. Это, к сожалению, делает тестирование локального файла сложным.

Если вы доверяете любому сайту вашими данными или выбранным количеством сайтов, вы можете настроить свой сервер script на отправку Access-Control-Allow-Origin, чтобы разрешить определенные сайты.

Подробнее см. https://developer.mozilla.org/en/http_access_control.

Ответ 3

Он должен работать.

• Наблюдали ли вы запрос в firebug или другой консоли отладки, что происходит и что ответ возвращается?

• Пожалуйста, рассмотрите политику того же самого происхождения, поэтому script, который делает этот запрос, также должен быть загружен с webapp.armadealo.com. Если нет, вам нужен jsonp-запрос. Посмотрите: http://api.jquery.com/jQuery.ajax/

Ответ 4

Из того, что я мог сказать, ваш сервер не поддерживает JSONP с их запросами. Например,

var getUrl = 'http://webapp.armadealo.com/home.json';
                $.ajax({
                    url : getUrl,
                    type : 'GET',
                    dataType : 'jsonp text',
                    jsonp: 'jsonp',
                    crossDomain : true,
                    success: function() { console.log('Success!'); },
                    error: function() { console.log('Uh Oh!'); },
                });

Это скажет SyntaxError: invalid label. Возврат, как у вас есть, не правильно отформатирован JSONP. Он должен быть завернут для работы как JSONP, потому что это требует jQuery.

Так что вы вернетесь, правильно, но это не то, что вам нужно. Что вам нужно для вызовов JSONP будет выглядеть так:

functionName({
  "mall": {
  "name": "South Shore Plaza",
  "city": "Braintree",
  "directory": "/assets/directory/0000/0094/show_floorplan.aspx",
  "postal_code": "02184",
  "street": "250 Granite St",
  "lng": -71.023692,
  "id": 147,
  "phone": "(781) 843-8200",
  "lat": 42.218688,
  "state": "MA"
}
});

... поскольку то, что возвращается в настоящее время, не является допустимым JavaScript (само по себе и тем, что оно есть), и что, как работает JSONP, на самом деле ответ должен быть исполняемым JavaScript.

Вы можете получить ту же ошибку, просто перевернув этот код прямо на своей странице в блоке <script>.

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

Например

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

$.ajax({
  dataType: 'jsonp',
  data: 'id=test',
  jsonp: 'jsonp_callback',
  url: 'http://www.differentdomain.com/get_data.php',
  success: function () {
    // do something
  },
});

Теперь на стороне сервера (в файле get_data.php) мы должны получить имя обратного вызова и отправить данные в формате JSON, завернутом в функцию обратного вызова. Что-то вроде этого:

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$data = array('1','2','3');
echo $jsonp_callback . '('.json_encode($data).');';
?>

JSONP может использоваться только тогда, когда сервер правильно встраивает ответ в вызов функции JavaScript.