Как вы используете данные JSON, извлеченные из внешнего php-файла, в вашем javascript / html?

#php #javascript #jquery #json #cross-server

#php #javascript #jquery #json #кросс-сервер

Вопрос:

Я смог извлечь данные JSON и поместить их в свой HTML-файл в виде сценария в моей голове. Как мне получить доступ к этим данным? (поместите его в используемые переменные)

внешний json.php файл (заполненный данными MySQL):

 names: 
[
    {"firstName":"Kevin","lastName":"Guo"},
    {"firstName":"Jun Sung","lastName":"Wong"},
    {"firstName":"Anton","lastName":"Ansalmar"},
    {"firstName":"Linda","lastName":"Wong"},
    {"firstName":"George","lastName":"Costanza"}
]

мой код javascript, который извлекает внешние данные json:

 var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://totallyExternalURL.php";
elm.id="jsonTest";
console.log(elm);
document.getElementsByTagName('head')[0].appendChild(elm);

Все данные json помещаются в виде сценария в моей голове, как я могу извлечь все имена / фамилии для отображения?

Ответ №1:

То, что вы делаете, на самом деле известно как jsonp . Обычно то, что вы должны сделать, это заставить скрипт возвращать скрипт, вызывающий функцию на вашей странице с данными. Возможно, вам будет проще работать с jQuery jsonp , используя или, при вызове скрипта на вашем собственном сервере, обычный `json’.

 function callback(data) {
  ... do something with the returned data
}

var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://totallyExternalURL.php?callback=callback";
elm.id="jsonTest";
console.log(elm);
document.getElementsByTagName('head')[0].appendChild(elm);

Затем верните ваш внешний скрипт (обратите внимание, ваш скрипт должен определять значение параметра обратного вызова и использовать его в качестве имени вызываемой функции). Имя функции и значение параметра обратного вызова должны совпадать.

 callback( { "names" : 
    [
        {"firstName":"Kevin","lastName":"Guo"},
        {"firstName":"Jun Sung","lastName":"Wong"},
        {"firstName":"Anton","lastName":"Ansalmar"},
        {"firstName":"Linda","lastName":"Wong"},
        {"firstName":"George","lastName":"Costanza"}
    ] });

Или с помощью jQuery

  $.getJSON( 'http://totallyExternalURL.php?callback=?', function(data) {
       ... do something with the data ...
 });

1. Большое вам спасибо! Метод javascript, который вы использовали, сработал отлично! Метод jquery вообще не работал. (Я использую jquery версии v1.6.4 через Google api) Там просто сказано, что «обратный вызов не определен». мой javascript: javascript function callback(data) { console.log(data); console.log(data.names[0].firstName); } var elm = document.createElement("script"); elm.setAttribute("type", "text/javascript"); elm.src = "http://externalURL.php?callback=callback"; elm.id="jsonTest"; console.log(elm); document.getElementsByTagName('head')[0].appendChild(elm); мой jsonp точно такой же, как у вас.

2. о, я заставил jquery работать! большое вам спасибо! Я просто не использовал функцию обратного вызова jquery в исходном операторе, потому что она не работала. Отдельный обратный вызов функции (data) вызывается просто отлично. javascript function callback(data) { console.log(data); console.log(data.names[0].firstName); } $.getJSON( 'http://externalURL.php?callback=?');

Ответ №2:

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

Итак, оберните JSON в вызов функции.

Найдите jsonp.