为什么 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

在此代码笔中，我有以下 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 变量值（抱歉，我可以' t post 还多于两个链接）工作正常！

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

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

Answer 1

首先，您需要将'Access-Control-Allow-Origin: *' header添加到您的API，否则无法从其他网站（如Codepen）访问。 Enable-cors 向您展示如何使用各种不同的语言执行此操作。

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

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

为什么 XMLHttpRequest 不喜欢我的 JSON？

Why doesn't XMLHttpRequest doesn't like my JSON?

javascript

php

json

xmlhttprequest