如何在javascript/html中使用从外部php文件中提取的JSON数据?

Question

我能够拉出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数据放在我的头作为一个脚本，我怎么能把所有的名字/姓氏显示?

Answer 1

你所做的实际上被称为jsonp。通常情况下，您要做的是让脚本返回一个脚本，调用带有数据的页面上的函数。您可能会发现使用jsonp或在您自己的服务器上调用脚本时使用常规' json'更容易使用jQuery。

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 ...
 });

Answer 2

让js作为一个函数返回一个javascript对象，即数组，然后你可以调用该函数并将返回值赋给一个变量。

将JSON封装在函数调用中。

查找jsonp