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

如何在javascript/html中使用从外部php文件提取的JSON数据?,php,javascript,jquery,json,cross-server,Php,Javascript,Jquery,Json,Cross Server,我能够提取JSON数据并将其作为脚本放入我的HTML文件中。我如何访问此数据?(将其放入可用变量中) 外部json.php文件(用mySQL数据填充): 拉入外部json数据的javascript代码: var elm = document.createElement("script"); elm.setAttribute("type", "text/javascript"); elm.src = "http://totallyExternalURL.php"; elm.id="jsonTest

我能够提取JSON数据并将其作为脚本放入我的HTML文件中。我如何访问此数据?(将其放入可用变量中)

外部json.php文件(用mySQL数据填充):

拉入外部json数据的javascript代码:

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数据作为脚本放在我的脑海中,我如何才能提取所有的名字/姓氏进行显示?

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

因此,将JSON封装在函数调用中


查找jsonp。

将js作为返回数组的javascript对象的函数返回,然后可以调用该函数并将返回值分配给变量

因此,将JSON封装在函数调用中


查找jsonp。

您所做的实际上被称为
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 ...
 });

您所做的实际上被称为
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 ...
 });

看看这个,看看这个,你听说过CORS吗?这是跨域请求的真正方式…你听说过CORS吗?这是处理跨域请求的真正方式…非常感谢!您使用的javascript方法非常有效!jquery方法根本不起作用。(我通过GoogleAPI使用jQueryV1.6.4)它只是说“回调未定义”。我的javascript:
javascript函数回调(数据){console.log(数据);console.log(数据.names[0].firstName);}var elm=document.createElement(“脚本”);setAttribute(“type”、“text/javascript”);elm.src=”http://externalURL.php?callback=callback"; elm.id=“jsonTest”;控制台日志(elm);document.getElementsByTagName('head')[0].appendChild(elm)我的jsonp和你的完全一样。哦,我让jquery开始工作了!非常感谢你!我只是没有在原始语句中使用jquery的回调函数,因为它不起作用。单独的函数回调(数据)调用得很好<代码>javascript函数回调(数据){console.log(数据);console.log(数据.names[0].firstName);}$.getJSON('http://externalURL.php?callback=?'); 非常感谢!您使用的javascript方法非常有效!jquery方法根本不起作用。(我通过GoogleAPI使用jQueryV1.6.4)它只是说“回调未定义”。我的javascript:
javascript函数回调(数据){console.log(数据);console.log(数据.names[0].firstName);}var elm=document.createElement(“脚本”);setAttribute(“type”、“text/javascript”);elm.src=”http://externalURL.php?callback=callback"; elm.id=“jsonTest”;控制台日志(elm);document.getElementsByTagName('head')[0].appendChild(elm)我的jsonp和你的完全一样。哦,我让jquery开始工作了!非常感谢你!我只是没有在原始语句中使用jquery的回调函数,因为它不起作用。单独的函数回调(数据)调用得很好<代码>javascript函数回调(数据){console.log(数据);console.log(数据.names[0].firstName);}$.getJSON('http://externalURL.php?callback=?');