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

问题描述：

I was able to pull the JSON data and put it into my HTML file as a script in my head. How do I gain access to this data? (put it into usable variables)

external json.php file (populated with mySQL data):

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

my javascript code that pulls in the external json data:

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

The entire json data is put as a script in my head, how can I pull all the firstnames/lastnames for display?

我能够提取JSON数据并将其作为我脑海中的脚本放入我的HTML文件中。如何获取对此数据的访问权限？（把它放入可用的变量中） p>

外部json.php文件（填充了mySQL数据）： p>

 名称：
 [\  n {“firstName”：“Kevin”，“lastName”：“Guo”}，
 {“firstName”：“Jun Sung”，“lastName”：“Wong”}，
 {“firstName”：“Anton”  ，“lastName”：“Ansalmar”}，
 {“firstName”：“Linda”，“lastName”：“Wong”}，
 {“firstName”：“George”，“lastName”：“Costanza”} \  n] 
  code>  pre> 
 
 我的javascript代码拉入了外部json数据： p> 
 
 
  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）; 
  code>  pre> 
 
 整个json数据作为脚本放在我的 请问如何将所有名字/姓氏拉出来显示？ p> 
  div>

答

What you're doing is actually known as jsonp. Normally what you'd do is have the script return a script calling a function on your page with the data. You might find it easier to work with jQuery either using jsonp or, if calling a script on your own server, regular `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);

Then have your external script return (note, your script should detect the value of the callback parameter and use that as the name of the function to invoke). The name of the function and the value of the callback parameter need to be the same.

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

Or with jQuery

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

答

Make the js returned as a function that returns the a javascript object that is the array and then you can make a call to that function and assign the return value to a variable.

So wrap the JSON in a function call.

Look up jsonp.

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

相关推荐