从外部URL获取JSON数据并以纯文本格式显示在div中 [英] Get JSON data from external URL and display it in a div as plain text

问题描述

我拥有类似于 https://www.googleapis.com/freebase/v1/的外部资源text / en / bob_dylan ，它返回一个JSON。我想在html中显示结果键值（可以说div的名称是summary）。另外，结果键的值应该以纯文本显示。

URL返回json：

{结果：鲍勃迪伦出生于罗伯特艾伦齐默尔曼，是一位美国
创作歌手，作家，诗人和画家，在过去的五十年里，他一直是流行音乐中的一位价值
的人物，大部分迪伦大多数
庆祝从1960年代开始的工作日期，当他成为.......}

JSON只有结果键，没有其他键

基本上我不想使用纯HTML和JavaScript以外的任何其他键。我是一个JavaScript的相对初学者，因此我要求提供评论性代码。

/ p>

 函数insertReply（content）{
 document.getElementById（'output'）。innerHTML = content; 
} 
 
 //创建脚本元素
 var script = document.createElement（'script'）; 
 //用s回调名称
 script.src ='http：//url.to.json？callback = insertReply'; 
 //插入脚本来记录和加载内容
 document.body.appendChild（script）; 
  

但是源代码必须意识到您希望它将调用的函数作为回调参数传递给它。

使用google API它看起来像这样：

  function insertReply（content ）{
 document.getElementById（'output'）。innerHTML = content; 
} 
 
 //创建脚本元素
 var script = document.createElement（'script'）; 
 //使用回调名称$ b $ assing src script.src ='https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply'; 
 //插入脚本来记录和加载内容
 document.body.appendChild（script）; 
  

在将回调传递给google api时，检查数据的外观如何：
https://www.googleapis.com/freebase/v1/text/en/bob_dylan ？callback = insertReply

以下是对JSONP的相当好的解释： http://en.wikipedia.org/wiki/JSONP

I have an external resource similar to https://www.googleapis.com/freebase/v1/text/en/bob_dylan which returns a JSON. I want to display the value of result key in a div in html (lets say the name of the div is "summary"). Also the value of result key should be displayed in plain text.
The URL returns the json:

{ "result": "Bob Dylan, born Robert Allen Zimmerman, is an American singer-songwriter, author, poet, and painter, who has been a major figure in popular music for five decades. Much of Dylan's most celebrated work dates from the 1960s, when he became an ......." }

The JSON has just the result key, no other keys
Basically I do not want to use anything other than plain HTML and JavaScript. I am a relative beginner to JavaScript and therefore I ask for commented code.

解决方案

You can do this with JSONP like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'http://url.to.json?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

But source must be aware that you want it to call function passed as callback parameter to it.

With google API it would look like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

Check how data looks like when you pass callback to google api: https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

Here is quite good explanation of JSONP: http://en.wikipedia.org/wiki/JSONP

这篇关于从外部URL获取JSON数据并以纯文本格式显示在div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！