Javascript 为什么'；t XMLHttpRequest不'；我不喜欢我的JSON？

我创建了一个非常简单的php程序，它从数据库中获取数据并构造一个php数组，然后将其转换为json：

$i = 0;
while($row = mysqli_fetch_array($result)) {
  $output[$i] = array();

  $output[$i]["tag"] = $row["tag"];
  $output[$i]["desc"] = htmlspecialchars($row["desc"]);

  if ($row["content"] != "") {
    $output[$i]["content"] = $row["content"];
  }

  if ($row["href"] != NULL) {
    $output[$i]["params"]["href"] = $row["href"];
  }

  $i++;
}

header('Content-Type: application/json; charset=utf-8');

echo json_encode($output, JSON_FORCE_OBJECT);

我希望在一个代码笔中使用它，链接到这里：

在这个代码笔中，我有以下javascript（来自这里的教程：）：

我想将它映射到javascript中的以下逻辑所使用的javascript对象，但遇到了问题，所以我想我应该保持简单，并尝试将其输出到控制台中，您会看到它没有，但如果您使用上面链接的教程中的url替换url变量值（对不起，我不能发布超过两个链接）它工作正常

我的php/json是否有问题？或者是否有其他方法从外部源获取json并将其存储为要处理的本地javascript对象

---

另外，为什么我的json格式不像本教程中的json格式好呢？

首先，您需要在API中添加“Access Control Allow Origin:*”标题，否则无法从其他网站（如Codepen）访问它。向您展示了如何使用各种不同的语言来实现这一点

提供的代码的另一个主要问题是它引用了“html”变量——我希望它是从JSON派生的对象——但在示例中似乎没有在任何地方声明它。要获取“html”变量，必须解析XMLHTTPRequest“load”上的响应事件处理程序-并将现有代码移动到该闭包中，因为此代码是异步执行的

---

您的JSON并没有以一种“漂亮”的方式进行布局——但这很好，这意味着您不会浪费带宽处理用户可能永远看不到的格式。然而，它是有效的JSON——您可以通过将输出粘贴到JSONLint中来验证这一点。

首先，您需要在API中添加“Access Control Allow Origin:*”头，否则它就不能可以从其他网站（如Codepen）访问。向您展示如何使用各种不同的语言进行访问

提供的代码的另一个主要问题是它引用了“html”变量——我希望它是从JSON派生的对象——但在示例中似乎没有在任何地方声明它。要获取“html”变量，必须解析XMLHTTPRequest“load”上的响应事件处理程序-并将现有代码移动到该闭包中，因为此代码是异步执行的

---

你的JSON并没有以一种“漂亮”的方式进行布局——但这很好，这意味着你不会浪费带宽处理用户可能永远看不到的格式。然而，它是有效的JSON——你可以通过将输出粘贴到JSONLint中来验证这一点。

CORS正是我想要的，以允许我在codepen中实际获取JSON。奇怪的是enough我还必须添加尾随“/”在Javascript中使用我的url变量使其工作。你对html变量的看法是正确的。我现在正在处理这个问题。我会在它工作后批准你的答案。待机。再次感谢你将我指向CORS。好的，在我的url变量中添加CORS和尾部斜杠之后，我所要做的就是将我的逻辑移到加载事件处理程序中就像你说的，因为它是异步执行的。在那之后，我只需要声明我的html变量并给它赋值JSON.parse（this.response）。（因为response返回一个字符串，而不是一个对象）可以看到它在代码笔上工作：CORS正是我想要的，它允许我在代码笔中实际获取JSON。奇怪的是，我还必须添加尾随的“/”在Javascript中使用我的url变量使其工作。你对html变量的看法是正确的。我现在正在处理这个问题。我会在它工作后批准你的答案。待机。再次感谢你将我指向CORS。好的，在我的url变量中添加CORS和尾部斜杠之后，我所要做的就是将我的逻辑移到加载事件处理程序中就像你说的，因为它是异步执行的。在那之后，我只需要声明我的html变量并给它赋值JSON.parse（this.response）。（因为response返回一个字符串，而不是一个对象）可以看到它在代码笔下工作：

function reqListener () {
  console.log(this.responseText);
  console.log(this.status);
}

var url = "http://example.com/api/html";
// tutorial url: https://api.github.com/repos/mozilla/kuma/contributors

var oReq = new XMLHttpRequest();
oReq.addEventListener('load', reqListener);
oReq.open("get", url, true);
oReq.send();