从外部URL获取JSON数据并以纯文本forms显示在div中
我有一个类似于https://www.googleapis.com/freebase/v1/text/en/bob_dylan的外部资源，它返回一个JSON。 我想显示结果键的值在html中的div（可以说div的名称是“摘要”）。 结果键的值也应该以纯文本显示。
该URL返回json：
{“结果”：“鲍勃·迪伦，生于罗伯特·艾伦·齐默尔曼，是美国创作歌手，作家，诗人和画家，五十年来一直是stream行音乐的重要人物，迪伦最着名的作品大多来自20世纪60年代，当他成为…….“}
JSON只有结果键，没有其他键
基本上我不想使用纯HTML和JavaScript以外的任何东西。 我是一个JavaScript的相对初学者，因此我要求评论代码。
你可以这样做与JSONP这样的：
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);
但是，源代码必须意识到，您希望它将调用的函数作为callbackparameter passing给它。
用谷歌API它看起来像这样：
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);
在将callback传递给Google API时，检查数据的外观： https ： //www.googleapis.com/freebase/v1/text/en/bob_dylan？ callback = insertReply
这里是对JSONP的很好的解释： http : //en.wikipedia.org/wiki/JSONP
这里是一个没有使用纯JavaScript的JQuery。 我用JavaScript的承诺和XMLHttpRequest你可以在这里试试这个小提琴
HTML
<div id="result" style="color:red"></div>
JavaScript的
var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { resolve(xhr.response); } else { reject(status); } }; xhr.send(); }); }; getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan').then(function(data) { alert('Your Json result is: ' + data.result); //you can comment this, i used it to debug result.innerText = data.result; //display the result in an HTML element }, function(status) { //error detection.... alert('Something went wrong.'); });
由于这是一个外部资源，所以您需要使用JSONP，因为相同的源策略 。
要做到这一点，你需要添加querystring参数callback ：
$.getJSON("http://myjsonsource?callback=?", function(data) { // Get the element with id summary and set the inner text to the result. $('#summary').text(data.result); });
如果你想使用普通的javascript，但是避免承诺，你可以使用Rami Sarieddine的解决scheme，但用这样的callback函数replacepromise：
var getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.send(); };
你可以这样称呼它：
getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan', function(err, data) { if (err != null) { alert('Something went wrong: ' + err); } else { alert('Your Json result is: ' + data.result); result.innerText = data.result; } });
您可以使用$ .ajax调用来获取值，然后把它放在你想要的div。 你必须知道的一件事是你不能接收JSON数据。 你必须使用JSONP。
代码会是这样的：
function CallURL() { $.ajax({ url: 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan', type: "GET", dataType: "jsonp", async: false, success: function(msg) { JsonpCallback(msg); }, error: function() { ErrorFunction(); } }); } function JsonpCallback(json) { document.getElementById('summary').innerHTML = json.result; }
由于所需的页面将从不同的域调用，因此您需要返回jsonp而不是json 。
$.get("http://theSource", {callback : "?" }, "jsonp", function(data) { $('#summary').text(data.result); });
使用Robin Hartman代码显示Json数据。 你需要添加，下面的行。
他给出的代码给了对象，对象。 这个代码以更好的方式检索数据。
result.innerText =JSON.stringify(data);
