Question

所以，我一直在编写一个网页，对于这个项目的一部分，我需要访问JavaScript代码中的JSON文件。所以我写了以下内容：

function xhrSuccess () { this.callback.apply(this, this.arguments); }
function xhrError () { console.error(this.statusTest); }

function loadFile(sUR) {
    var oReq = new XMLHttpRequest();
    oReq.callback = readJSON;
    oReq.onload = xhrSuccess;
    oReq.onerror = xhrError;
    oReq.open("GET", sURL, true);
    oReq.send(null);
    return oReq.callback();
}

function readJSON() {
    console.log(this.responseText);
    var my_JSON_object = JSON.parse(this.responseText);
    return my_JSON_object;
}

以这种方式打电话：

var data = loadFile("http://localhost:8000/json/data.json");

但是我一直有一些错误，我不确定他们的意思，甚至不知道我为什么会这样做。

Uncaught SyntaxError: Unexpected end of input
Uncaught SyntaxError: Unexpected token :

当我尝试解析我的JSON时发生第一个错误。

我根本不知道这意味着什么，因为它通常与某种错位的分号或相关对象有关，导致文字语法错误，但错误是在JSON.parse()行捕获的所以我＆＃ 39;我不确定我做错了什么。

无论如何，欢迎任何帮助。

这是我的JSON：

{ "data": [
     {"file": "temp", "title": "This is a test", "date": "August 21, 2015"},
     {"file": "temp2", "title": "This is also a test", "date": "August 20, 2015"},
    {"file": "temp3", "title": "This is the final test", "date": "August 22, 2015"}
] }

Answer 1

如果您尝试解析未进行字符串化的JSON对象，则会出现Unexpected token错误。你确定你得到的JSON内容是字符串吗？

接下来，在loadFile函数中返回oReq.callback();。稍后在（var data = loadFile("http://localhost:8000/json/data.json");）上调用loadFile时，会立即执行行return oReq.callback();，因此在执行readJSON时，this.responseText的值为空字符串（""），即为什么你应该得到一个错误，如“意外的输入结束”（因为JSON.parse('')引发了这个错误）。

这样做的一种方法是直接在readJSON函数中处理您的数据，因为这是您的数据（在解析异步请求之后）的位置。但如果您以后必须使用第一次请求的数据发出一个/多个请求，这可能会导致代码质量不佳：

var xhr1 = new XMLHttpRequest();
xhr1.onload = function (req) {
  var data = JSON.parse(req.responseText);
  var postId = data.posts[0].id;
  var xhr2 = new XMLHttpRequest();
  xhr2.onload = function (req2) {
    // imagine if we sill have 2 more requests before getting the data needed...
  };
  xh2.open('GET', 'http://example.com/posts/' + postId, true);
  xh2.send();
};
xhr1.open('GET', 'http://example.com/users/1', true);
xhr1.send();

这种回调架构被称为“末日金字塔”。如今，我们有一些工具可以让我们为这些用例编写更好的代码，例如Promises。它目前处于草案（ES6 / ES2015规范的一部分），并非所有浏览器都支持它，但您可以使用实现它的polyfill或库/框架（例如来自jQuery的$ .ajax，来自AngularJS的$ q，来自babel-polyfill的Promise）。 ..）。

在您的情况下，我们可以使用来自Babel的babel-polyfill。首先，您需要在Javascript代码之前包含polyfill，例如使用cdnjs.com链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

然后，您的代码将如下所示：

function loadData(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function onload(request) {
      if (request.status >= 200 && request.status < 400) {
        var data = JSON.parse(request.responseText);
        resolve(data);
      } else {
        // We reached our target server, but it returned an error
        reject(Error('Could not load any data'));
      }
    };
    xhr.onerror = function onerror(err) {
      reject(err);
    };

    xhr.open("GET", url, true);
    xhr.send();
  });
}

loadData('http://example.com')
  .then(function (data) {
    console.log('Got the data!', data);
    // do something with the data..., for example, if data is a stringified json:
    return JSON.parse(data);
  }, function (err) {
    console.log('There was an error', err);
  })
  .then(function (parsedJson) {
    console.log('Parsed JSON', parsedJson);
  });

Link to the plunker

网上有大量关于异步请求和承诺的指南/教程，我建议你阅读它！ ;）

Answer 2

未被捕获的SyntaxError意味着您要解析的JSON格式不正确。

你在哪里设置this.responseText？我认为你应该使用sMsg.responseText。也许在您的问题中添加更多周围的代码可以澄清这一点。

阅读JSON文件的问题

2 个答案: