Question

我一直在尝试不同的编码方法，目前是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);

Answer 1

这假设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执行。

Answer 2

如果您按顺序执行此代码：

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

执行以下步骤：

声明bibleVerse变量
声明setup函数
声明gotData函数
将bookname.chapter.verse.text写入文档。

这不起作用，因为：

没有什么是调用设置（除非你从代码中省略了这个）
document.write在 gotData运行之前正在运行。

bookname未定义。

即使document.write按照正确的顺序发生，在页面加载完成后也不支持。

我建议你：

在占据该节目的页面上放置一个占位符（如<div id="verse"></div>）

将您的setup功能附加到DOM事件（例如document.addEventListener('load', setup);）

删除document.write，并在gotData函数中添加以下内容：

样品：

var textNode = document.createTextNode(data.bookname.chapter.verse.text); document.querySelector('#verse').appendChild(textNode);

加载JSON URL并发布到网站

2 个答案: