Question

只是获取一个简单的.json文件并解析它。无论如何都失败了。我试过其他线程的解决方案，没有一个工作。 console.log（）显示了一个对象，但我无法使用它。我尝试用几种不同的方式改变json但是没有用。这是.json文件：

[    {
    "name": "Alabama",
    "abbreviation": "AL"
},
{
    "name": "Alaska",
    "abbreviation": "AK"
},
{
    "name": "American Samoa",
    "abbreviation": "AS"
},
{
    "name": "Arizona",
    "abbreviation": "AZ"
}]

对我来说没问题。所以我添加了这个函数来使用它：

function fillStates(){

        var obj = $.get('states.json');

        console.log(obj);

        var states = JSON.parse(obj);

        //console.log(states);

 }

Answer 1

我猜你误解了jQuery $.get()方法。它将返回Promise对象而不是您想要的数据：

从jQuery 1.5开始，所有jQuery的Ajax方法都返回XMLHTTPRequest对象的超集。这个jQuery XHR对象，或者＆＃34; jqXHR，＆＃34; $ .get（）返回实现Promise接口，为其提供Promise的所有属性，方法和行为（有关详细信息，请参阅Deferred对象）。 jqXHR.done（）（用于成功），jqXHR.fail（）（用于错误）和jqXHR.always（）（用于完成，无论成功还是错误）方法采用在请求终止时调用的函数参数。有关此函数接收的参数的信息，请参阅$ .ajax（）文档的jqXHR Object部分。

这就是你给[object Object] JSON.parse()功能的原因。

您必须使用成功回调：

function fillStates(){
        var obj = $.get('states.json', function(data) {
              // It will be executed in case of sucess
              console.log(data);                  
        });
}

Answer 2

$.get的使用不正确，因为它是异步执行。这应该有效：

$.get( "states.json", function( obj ) {
  var states = JSON.parse(obj);
});

Answer 3

让我们备份并检查$.get()是什么。这种方法只是一种简便的方法：

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

请参阅reference文档。现在让我们跳转到$.ajax文档，了解jQuery如何解析返回值：

根据文件：

dataType （默认：智能猜测（xml，json，script或html））

类型：字符串

您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它（XML MIME类型将产生XML，在1.4 JSON中将产生一个JavaScript对象，在1.4脚本中将执行脚本，其他任何东西将是以字符串形式返回）。可用的类型（以及作为成功回调的第一个参数传递的结果）是：
<小时/>   ＆＃34; xml＆＃34;：返回可以通过jQuery处理的XML文档。      ＆＃34; html＆＃34;：以纯文本形式返回HTML;包含的脚本标记在插入DOM时进行评估。      ＆＃34; script＆＃34;：将响应评估为JavaScript并将其作为纯文本返回。通过将查询字符串参数 = [TIMESTAMP]附加到URL来禁用缓存，除非缓存选项设置为true。 注意：这会将POST转为GET以获取远程域请求。      ＆＃34; json＆＃34;：将响应评估为JSON并返回JavaScript对象。跨域＆＃34; json＆＃34;请求转换为＆＃34; jsonp＆＃34;除非请求在其请求选项中包含jsonp：false。 JSON数据以严格的方式解析;任何格式错误的JSON都会被拒绝，并抛出一个解析错误。从jQuery 1.9开始，空响应也被拒绝;服务器应该返回null或{}的响应。（有关正确的JSON格式的更多信息，请参阅json.org。）      ＆＃34; jsonp＆＃34;：使用JSONP加载JSON块。添加额外的＆＃34;？callback =？＆＃34;到URL的末尾以指定回调。通过将查询字符串参数＆＃34; = [TIMESTAMP]＆＃34;，附加到URL来禁用缓存，除非缓存选项设置为true。      ＆＃34; text＆＃34;：纯文本字符串。      多个空格分隔值：从jQuery 1.5 开始，jQuery可以将dataType从Content-Type标头中收到的数据转换为您需要的数据类型。例如，如果您希望将文本响应视为XML，请使用＆＃34; text xml＆＃34;对于dataType。您还可以发出JSONP请求，将其作为文本接收，并由jQuery解释为XML：＆＃34; jsonp text xml＆＃34;。类似地，一个速记字符串，如＆＃34; jsonp xml＆＃34;将首先尝试从jsonp转换为xml，如果失败，则从jsonp转换为text，然后从text转换为xml。

总而言之，jQuery将使用它的智能猜测方法解释响应，因为您没有指定返回数据类型。数据类型将推断为JSON，并将解析为JavaScript对象。因此，在使用基于jQuery的ajax方法（例如$.get，$.post，$.ajax时，您不应该对返回的数据执行JSON.parse(...)， $.load（数据方法，而不是事件处理套件方法）或$.getJSON。

继续，AJAX代表异步JavaScript和XML 。异步部分是关键所在。请求在带外操作，而JavaScript在页面上继续执行，从下一行开始。在您的情况下，obj将是$.promise，不结果。使用JSON.parse解析此问题将导致错误。

您可以从这里选择两个选项：

等待承诺使用.done()解决并执行该承诺。
传递success回调函数，以便在成功完成ajax请求后执行。

这两个例子都在下面：

使用.done()：

var obj;
function fillStates() {
    $.get('states.json').done(function (data) {
        obj = data;
        console.log(obj);
    });
 }

使用success回调：

var obj;
function fillStates() {
    $.get('states.json', function (data) {
        obj = data;
        console.log(obj);
    });
 }

Answer 4

在 JSON.parse（）之前，只需检查typeOf obj==='object'即可。如果为true，则不需要解析因为变量已经是对象。

未捕获的SyntaxError：意外的令牌o

4 个答案: