为什么 XMLHttpRequest 不喜欢我的 JSON？

Question

我创建了一个非常简单的 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);

我希望在 codepen 中使用它，链接在这里：http://codepen.io/mrcarter7/pen/pJMxzr

在这个 codepen 中，我有以下 javascript（来自此处的教程：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest）：

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

我想将它映射到一个 javascript 对象以供 javascript 中的以下逻辑使用，但遇到了问题，所以我想我会保持简单，只是尝试让它在控制台中输出，然后你'会看到它没有，但如果你用上面链接的教程中的 URL 替换 url 变量值（对不起，我不能发布两个以上的链接）它工作正常！

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

奖励：另外，为什么我的 json 格式不像教程中的 json 那样好？

Answer 1

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

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

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