在 jQuery 中附加 [object%20Object] 的 JSON 请求

Posted

技术标签:

【中文标题】在 jQuery 中附加 [object%20Object] 的 JSON 请求【英文标题】:JSON Request appended with [object%20Object] in jQuery 【发布时间】:2013-01-03 09:23:51 【问题描述】:

我正在尝试使用getJSON 方法获取我用jQuery 编写的自定义JSON 提要。由于未知原因,该 URL 似乎已从末尾剥离 cache_gen.php?location=PL4 并替换为 [object%20Object] 导致发生 404 错误。

这是我正在使用的 jQuery:

var fetchData = function() 

    if (Modernizr.localstorage) 

        var api_location = "http://weatherapp.dev/cache_gen.php";
        var user_location = "PL4";
        var date = new Date();

        console.log(api_location + '?location=' + user_location);

        jQuery.getJSON(
            type: "GET",
            url: api_location + '?location=' + user_location,
            dataType: "json",
            success: function(jsonData) 
                console.log(jsonData);
            
        );

     else 
        alert('Your browser is not yet supported.  Please upgrade to either Google Chrome or Safari.');
    


fetchData();

从控制台日志我可以看到 URL 字符串正确计算为:http://weatherapp.dev/cache_gen.php?location=PL4

但是控制台中的第二行是:Failed to load resource: the server responded with a status of 404 (Not Found)

谁能指出我正确的方向?

更新 19/01/2013 23:15

好吧,我刚刚进行了转换,因此使用$.ajax 完全适合文档。我还添加了一个失败事件并记录了传递给它的所有数据。

var fetchData = function() 

    if (Modernizr.localstorage) 

        var api_location = "http://weatherapp.dev/cache_gen.php";
        var user_location = "PL4";
        var date = new Date();

        var url = api_location + '?location=' + user_location;

        console.log(url);

        jQuery.ajax(
            type: "GET",
            url: api_location + '?location=' + user_location,
            dataType: "json",
            success: function(jsonData) 

                console.log(jsonData);
            ,
            error: function( jqXHR, textStatus, errorThrown ) 
                console.log('textStatus: ' + textStatus );
                console.log('errorThrown: ' + errorThrown );
                console.log('jqXHR' + jqXHR);
            
        );

     else 
        alert('Your browser is not yet supported.  Please upgrade to either Google Chrome or Safari.');
    


fetchData();

在此之后,我的控制台会为我提供以下信息:

http://weatherapp.dev/cache_gen.php?location=PL4
download_api.js:44textStatus: parsererror
download_api.js:45errorThrown: SyntaxError: JSON Parse error: Unable to parse JSON string
download_api.js:46jqXHR[object Object]

我已确保 JSON 提要的标头是最新的,并且提要肯定提供有效的 JSON(它有效地缓存了第 3 方服务提要以节省 API 成本)。

【问题讨论】:

weatherapp.dev/cache_gen.php?location=PL4 不是有效的网址。 @popnoodles,它可能是/etc/hosts 重定向:)。但是,当然.dev 听起来很可疑 .dev 是一个开发域。它已经在我的本地系统上设置了一个 Apache 虚拟主机,它在我的 /etc/hosts 中有一个条目,以确保正确解析。我可以在浏览器中访问此域,它与加载 JS 文件的域相同。 当您浏览到 URL 时屏幕上会出现什么? 我可以证明这一点,从开发工具复制您的回复并将其粘贴到 jsonlint.com - 它会告诉您您的错误在哪里。 【参考方案1】:

您看到此错误的原因:

http://weatherapp.dev/cache_gen.php?location=PL4
download_api.js:44textStatus: parsererror
download_api.js:45errorThrown: SyntaxError: JSON Parse error: Unable to parse JSON string
download_api.js:46jqXHR[object Object]

是因为您的 JSON 无效。即使从服务器正确返回响应,如果您的 dataType 是 'json' 并且返回的响应不是格式正确的 JSON,jQuery 也会执行错误函数参数。

http://jsonlint.com 是一种验证 JSON 字符串有效性的快速简便的方法。

【讨论】:

扩展@Adam 的好答案。更一般地说,调用中的“数据类型”值(显式或隐含)与从服务器返回的实际数据之间存在一些不匹配。我将“html”指定为我的数据类型并收到此错误。我省略了可选的数据类型参数并停止看到错误。我肯定会返回 html 并插入页面,但我愿意向 ajax 女神低头,让她认为我的返回值是她想要的任何类型,只要我的调用有效。【参考方案2】:

我今天遇到了同样的问题。在我的例子中,我将一个 JSON 对象分配给一个名为“location”的变量,它是javascript under Windows 中的保留字,并且显然是 windows.location 的简写!因此,浏览器重定向到当前 URL,并附加了 [object%20Object]。如果同样的事情发生在您身上,只需使用“位置”以外的变量名称。希望这对某人有所帮助。

【讨论】:

这节省了我一些时间和头痛。我不知道“位置”是 Windows 上 JavaScript 中的保留字。谢谢!【参考方案3】:

查看实际函数用法:

http://api.jquery.com/jQuery.getJSON/

你不能像$.ajax那样将对象参数传递给$.getJSON,你的代码应该是这样的:

    jQuery.getJSON('api_location + '?location=' + user_location)
         .done(function() 
            //success here
         )
         .fail(function() 
           //fail here
         );

为了更清楚一点,$.getJSON 只是一个“包装函数”,它最终用type:'get',dataType:'JSON' 调用$.ajax。您可以在我上面提供的链接中看到这一点。

【讨论】:

实际上让 OP 用 .ajax 替换 .getJSON 更容易 @popnoodles 为什么? OP 没有使用$.getJSON 尚未包含的任何选项 @charlietfl 因为他们编写的代码就像他们应该使用 .ajax 一样 - 只更改 7 个字符更容易。 刚刚更新了主帖,在尝试了多种不同的事情后,你选择的是一个错误。现在也添加了更多调试信息。

以上是关于在 jQuery 中附加 [object%20Object] 的 JSON 请求的主要内容,如果未能解决你的问题,请参考以下文章

如何在jquery中将变量附加到url?

关于jquery的$each((Object, function(p1, p2)用法

克隆上的jquery ui可拖动停止功能

jQuery 附加 DM 事件不再起作用

使用 jQuery 将文本附加到 textarea 的末尾

使用datepicker以多种格式附加日期