Как включить данные JSON в Javascript синхронно без разбора? - PullRequest
Новая
       24

Как включить данные JSON в Javascript синхронно без разбора?

29 голосов
/ 07 ноября 2010


Я хочу загрузить файл JSON со своего собственного сервера, содержащий массив, в переменную объекта javascript.
Я хотел бы сделать это в начале загрузки страницы синхронно, потому что данные необходимы во время загрузки страницы.

Мне удалось использовать jQuery.getJSON, но это асинхронный ajax, и он кажется немного излишним.

Есть ли способ загрузить JSON синхронно, не выполняя собственный анализ?
(более или менее похоже на использование <script language="JavaScript" src="MyArray.json"></script>)

Заранее спасибо за любую помощь, надеюсь, что это имеет смысл, так как я новичок в JavaScript. Paolo

Ответы [ 7 ]

35 голосов
/ 07 ноября 2010

getJSON() - это просто сокращение для функции ajax() с набором dataType:'json'.Функция ajax() позволит вам многое настроить для запроса. 

$.ajax({
  url: 'MyArray.json',
  async: false,
  dataType: 'json',
  success: function (response) {
    // do stuff with response.
  }
});

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

14 голосов
/ 07 ноября 2010

Вот, пожалуйста, 

// Load JSON text from server hosted file and return JSON parsed object
function loadJSON(filePath) {
  // Load json file;
  var json = loadTextFileAjaxSync(filePath, "application/json");
  // Parse json
  return JSON.parse(json);
}   

// Load text with Ajax synchronously: takes path to file and optional MIME type
function loadTextFileAjaxSync(filePath, mimeType)
{
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET",filePath,false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status==200)
  {
    return xmlhttp.responseText;
  }
  else {
    // TODO Throw exception
    return null;
  }
}

ПРИМЕЧАНИЕ. Этот код работает только в современных браузерах - IE8, FF, Chrome, Opera, Safari.Для устаревших версий IE вы должны использовать ActiveX, дайте мне знать, если вы хотите, я скажу вам, как;)

4 голосов
/ 07 ноября 2010

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

<script type="text/javascript">
var settings = <?php echo $json; ?>;
</script>

Это позволит вам использовать ваши данные синхронно, а не пытаться использовать AJAX асинхронно.

В противном случае вам придется ждать обратного вызова AJAX, прежде чем продолжить, чем бы вы ни занимались.

1 голос
/ 20 февраля 2013

Мне нужно было только прочитать небольшой входной файл в формате json и извлечь небольшой объем данных.Это отлично работает в следующих условиях:

json-файл находится в том же каталоге, что и скрипт, и называется data.json, он выглядит примерно так: 

{"outlets":[
        {
            "name":"John Smith",
            "address":"some street, some town",
            "type":"restaurant"
        },
..etc...

считывает данные вJS, как это: 

var data = <?php echo require_once('data.json'); ?>;

Доступ к элементам данных, как это: 

for (var i in data.outlets) {    
var name = data.outlets[i].name;
... do some other stuff...
}
0 голосов
/ 24 июля 2018

Современный способ HTML5 без jQuery будет: 

   var url="https://api.myjson.com/bins/1hk8lu" || "my.json"
   var ok=await fetch(url)
   var json=await ok.json()
   alert(a.test)
0 голосов
/ 26 ноября 2015

AFAIK jQuery устарел синхронные запросы XHR из-за потенциальных проблем с производительностью.Вы можете попробовать обернуть код своего приложения в обработчик ответов XHR следующим образом: 

$(document).ready(function() {
  $.get('/path/to/json/resource', function(response) {
    //'response' now contains your data
    //your app code goes here
    //...
  });
});
0 голосов
/ 03 сентября 2013

Если RequireJS является опцией, вы можете сделать ее зависимой, используя requirejs.Я использую его для макетирования данных в моем приложении Angular.Крайне важно, чтобы некоторые из проверенных данных были перед загрузкой приложения. 

//Inside file my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

Просто оберните данные json в определение и объявите их как зависимость.Больше информации здесь: http://requirejs.org/docs/api.html#defsimple

...