为了账号安全,请及时绑定邮箱和手机立即绑定

从外部URL获取JSON数据并在div中将其显示为纯文本

/ 猿问

从外部URL获取JSON数据并在div中将其显示为纯文本

拉风的咖菲猫 2019-11-14 14:16:48

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

URL返回json:


{“结果”:“鲍勃·迪伦(Bob Dylan)出生于罗伯特·艾伦·齐默尔曼(Robert Allen Zimmerman),是美国歌手,作家,作家,诗人和画家,他是流行音乐界的主要人物已有50年了。 1960年代,当他成为.......“}


JSON仅具有结果键,没有其他键

基本上,我不希望使用纯HTML和JavaScript以外的任何东西。我是JavaScript的初学者,因此我要求提供注释的代码。


查看完整描述

3 回答

?
九州编程

您可以像这样使用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);

但是源必须知道您希望它调用作为回调参数传递给它的函数。


使用谷歌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);

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


这是有关JSONP的很好的解释:http : //en.wikipedia.org/wiki/JSONP


查看完整回答
反对 回复 2019-11-14
?
犯罪嫌疑人X

这是一个没有将JQuery与纯JavaScript结合使用的情况。我使用了JavaScript Promise和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.');

});


查看完整回答
反对 回复 2019-11-14
?
拉丁的传说

由于它是一种外部资源,因此需要使用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);

});


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信