加载 JSON 网址并发布到网站

Loading A JSON Url and Posting to Website

本文关键字：网站 并发 JSON 加载      更新时间：2023-09-26

我一直在尝试不同的编码方法，目前是p5js.org的，我看不到使用document.write将json代码发布到我的网站上，但是它确实打印到控制台。有什么想法吗？

var bibleVerse;
function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData, 'jsonp');
}
function gotData(data){
  println(data);
  bibleVerse = data;  
}    
document.write(bookname.chapter.verse.text);

这是假设 p5js 工作。

您应该

确定要在网页上查看数据的位置，而不是使用 document.write ，并将数据插入到该元素中。 您可以使用元素的id来执行此操作。

例如，您想将引号放入此段落中：

<p id="quote">Alternate Text</p>

然后将您的document.write替换为以下内容：

document.getElementById("quote").innerHTML = data;

综上所述，您的JS代码可能如下所示：

function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData,     'jsonp');
}
  function gotData(data){
  document.getElementById("quote").innerHTML = data;
  // note: var bibleVerse is never used
}

Alternate Text在那里以防万一 JS 函数失败。

如果你是Web开发的新手，请注意：如果你不想使用jQuery的$(document).ready()函数，你应该把这个JS脚本放在底部的<body>里。 这样你的页面首先加载，然后执行JS。

如果按

顺序遵循此代码：

var bibleVerse;
function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData, 'jsonp');
}
function gotData(data){
  println(data);
  bibleVerse = data;  
}    
document.write(bookname.chapter.verse.text);

它执行以下步骤：

  1. 声明一个bibleVerse变量
  2. 声明setup函数
  3. 声明gotData函数
  4. 将bookname.chapter.verse.text写入文档。

这是行不通的，因为：

  1. 没有任何东西调用安装程序（除非您从代码中省略了这一点）
  2. document.write在运行gotData之前正在运行。
  3. bookname未定义。
  4. 即使document.write以正确的顺序发生，在页面完成加载后，这并不真正支持。

我推荐你：

  1. 在页面上放置一个占位符，用于保存经文（如<div id="verse"></div>）
  2. 将setup函数附加到 DOM 事件（如 document.addEventListener('load', setup); ）
  3. 删除document.write ，并将以下内容添加到gotData函数中：

样本：

var textNode = document.createTextNode(data.bookname.chapter.verse.text);
document.querySelector('#verse').appendChild(textNode);
相关文章：