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

Posted

技术标签:

【中文标题】如何使用从 javascript/html 中的外部 php 文件中提取的 JSON 数据?【英文标题】:How do you use the JSON data pulled from an external php file in your javascript/html? 【发布时间】:2011-09-29 04:45:46 【问题描述】:

我能够提取 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"
]

拉入外部 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 数据作为脚本放在我的脑海中,我怎样才能拉出所有的名字/姓氏来显示?

【问题讨论】:

你听说过CORS吗?才是真正的跨域请求方式…… 【参考方案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 ...
 );

【讨论】:

非常感谢!您提出的 javascript 方法运行良好! jquery 方法根本不起作用。 (我通过google api使用jquery v1.6.4)它只是说“回调未定义”。我的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和你的一模一样。 哦,我让 jquery 工作了!太感谢了!我只是没有在原始语句中使用 jquery 的回调函数,因为它不起作用。单独的函数回调(数据)被调用就好了。 javascript function callback(data) console.log(data); console.log(data.names[0].firstName); $.getJSON( 'http://externalURL.php?callback=?'); 【参考方案2】:

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

所以将 JSON 包装在一个函数调用中。

查找jsonp。

【讨论】:

bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp 看看这个和niryariv.wordpress.com/2009/05/05/jsonp-quickly

以上是关于如何使用从 javascript/html 中的外部 php 文件中提取的 JSON 数据?的主要内容,如果未能解决你的问题,请参考以下文章

从刀片中的外键获取数据

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

尝试使用 Laravel 中的外键从数据库中提取多行

如何通过laravel中的外键检索记录的完整数据?

姜戈。从表单对象访问模板中的外键字段

如何编写一个查询,根据 ms 访问的子表中的外键获取信息?