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

Posted 2023-03-05

【中文标题】从外部 URL 获取 JSON 数据并将其以纯文本形式显示在 div 中

【英文标题】：Get JSON data from external URL and display it in a div as plain text

【发布时间】：2012-04-12 21:45:23

【问题描述】：

我有一个类似于https://www.googleapis.com/freebase/v1/text/en/bob_dylan 的外部资源，它返回一个 JSON。我想在 html 中的 div 中显示结果键的值（假设 div 的名称是“摘要”）。结果键的值也应该以纯文本形式显示。 URL返回json：

“结果”：“鲍勃·迪伦，原名罗伯特·艾伦·齐默尔曼，是美国人 创作型歌手、作家、诗人和画家，曾在 在流行音乐中占据了 5 年的时间。大部分迪伦最 著名的作品可以追溯到 1960 年代，当时他成为了......”

JSON 只有结果键，没有其他键 基本上我不想使用纯 HTML 和 javascript 以外的任何东西。我是 JavaScript 的相对初学者，因此我要求注释代码。

【问题讨论】：

这是一个相当基本的 HTML/AJAX 问题。到目前为止你有什么代码？你在哪里卡住？这是针对 AJAX 的 jQuery 文档，专门针对 JSON 数据执行 GET：api.jquery.com/jQuery.getJSON - 您可能会遇到的问题是同源策略，因为您将针对与您所在的域不同的域执行 AJAX 请求脚本正在运行。

当我们尝试使用 AJAX 从外部资源加载 JSON 数据时，可能会出现 CORS 错误

【参考方案1】：

这是一个不使用纯 JavaScript 的 JQuery。我使用了 javascript 承诺和 XMLHttpRequest 你可以在fiddle这里试试看

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.');
);

【讨论】：

旧版浏览器不支持 Promise。

在最新版本的 Chrome 中，“then”函数的第一部分有效，如果 url 正确，我会得到结果。但是，如果 url 不正确，我永远不会收到“出现问题”警报。也许这与 Fiddler 的工作方式有关？

任何版本的 Internet Explorer caniuse.com/#feat=promises 不支持 Promise，并且您不需要 简单 HTTP 请求的 Promise...

是的，但现在 Edge 是支持 Promises 的新浏览器。你可能不需要 Promises，但它是执行异步 JS 的新标准方式，所以为什么不编写简洁的脚本呢？

@Abderrahim 抱歉，找不到该页面。你删除了这个问题吗？

【参考方案2】：

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

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

使用 google 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

【参考方案3】：

由于它是一个外部资源，您需要使用 JSONP，因为 Same origin policy。 为此，您需要添加查询字符串参数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);
);

【讨论】：

OP 要求“纯 HTML 和 JavaScript”

前提是资源必须知道回调并对其进行调用

【参考方案4】：

如果您想使用纯 javascript，但避免使用 Promise，您可以使用 Rami Sarieddine 的解决方案，但将 Promise 替换为回调函数，如下所示：

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;
  
);

【讨论】：

我在使用此解决方案的 Chrome 中收到“No 'Access-Control-Allow-Origin' header”错误。不适合我。

你是对的。这仅在服务器声明“Access-Control-Allow-Origin”标头并允许其他人访问其资源时才有效。否则，您必须使用 JSONP（如果服务器支持）或 CORS 代理服务器，它会下载数据并为您设置标头。

【参考方案5】：

您可以使用 $.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;

【讨论】：

它要显示在 div 中，但要创建 json 对象

【参考方案6】：

使用 Robin Hartman 代码显示 Json 数据。您需要添加以下行。

他给你的代码给了你对象，对象。此代码以更好的方式检索数据。

result.innerText =JSON.stringify(data);

【讨论】：

他说，“我想在 html 的 div 中显示结果键的值”，而这正是我和 Rami Sarieddine 的代码所做的。您的代码将显示整个数据，这不是他想要的。

【参考方案7】：

由于将从不同的域调用所需的页面，因此您需要返回 jsonp 而不是 json。

$.get("http://theSource", callback : "?" , "jsonp",  function(data) 
    $('#summary').text(data.result);
);