Ajax - 返回的 json 对象在 ie 中为空答案

【问题标题】：Ajax - returned json object is null in ieAjax - 返回的 json 对象在 ie 中为空
【发布时间】：2014-04-21 02:43:22
【问题描述】：

您好，我有一个通过 ajax 连接到 php 脚本的 javascript 代码。这个 php 脚本返回一个数组。在ajax调用的成功函数中，我使用返回的数组向用户显示信息。这在我尝试过的所有浏览器中都可以正常工作，除了 Internet Explorer。我收到以下错误：

Unable to get property '0' of undefined or null reference

'0' 是数组中第一个元素的索引。代码如下：

$.ajax({
    type: "POST",
    url: "/add.php",
    data: 'id=' + itemid,
    dataType: "json",
    success: function (data) {
        document.getElementById("name").innerHTML = data[0];
        document.getElementById("desc").innerHTML = data[1];
        document.getElementById("price").innerHTML = data[2];
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});

PHP

$output = array();
$output[0] = $itemname;
$output[1] = $itemdescription;
$output[2] = $itemprice;
echo json_encode($output);
exit();

我在成功函数中尝试了console.log(data)，在 Internet Explorer 中它返回 null，而在其他浏览器中它返回数组。有谁知道这里出了什么问题？

IE 控制台上的错误代码是 SCRIPT5007。搜索后，这意味着：

You attempted to invoke the Object.prototype.toString or Object.prototype.valueOf method on an object of a type other than Object. The object of this type of invocation must be of type Object.

链接：http://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=EN-GB&k=k(VS.WebClient.Help.SCRIPT5007)

【问题讨论】：

嗯。也许尝试将data = JSON.parse(data) 放在成功函数的开头 - ？
@rm-vanda dataType 是 json 所以不需要。但是我仍然尝试过，它返回 null
开发工具中 IE 中的服务器响应是什么样的？
你能试试 alert (typeof data) 和 alert (data.length) 告诉我们你有什么吗？
@LShetty typeof 是对象，长度返回以下内容：无法获取未定义或空引用的属性“长度”

标签： javascript php jquery ajax json

【解决方案1】：

我无法使用您的示例代码重现该问题。我已经在 Safari 和 IE 11 上测试了您的代码。

这是我使用的示例代码（根据您的修改）：

PHP 代码示例

<?php
$output = array();
$output[0] = 'Name';
$output[1] = 'Description for Item: ' . $_POST['id'];
$output[2] = 'Price';
echo json_encode($output);
exit();
?>

由于我不知道 $itemname、$itemdescription 或 $itemprice 是什么，我硬编码了值，除了传入的 id。

HTML 代码示例

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="name"></div>
        <div id="desc"></div>
        <div id="price"></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
            var $Xhr = $.ajax({
                type: "POST",
                url: "./add.php",
                data: {
                    id: 1
                },
                dataType: "json",
                success: function () {},
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
            $Xhr.done(function renderData(data){
                document.getElementById("name").innerHTML = data[0];
                document.getElementById("desc").innerHTML = data[1];
                document.getElementById("price").innerHTML = data[2];
            });
        </script>
    </body>
</html>

注意事项：
- 由于示例“add.php”文件的位置，我在 Ajax URL 中使用“./”。
- 我使用对象而不是字符串来存储数据。这就是我通常构建数据变量的方式。
- 成功的替代方法，我尝试使用 $.done 并且仍然能够检索数据。

输出：

名称
商品描述：1
价格

尝试使用 $.done 方法，看看这是否对您有帮助。 https://api.jquery.com/deferred.done/

我还建议在开发者工具中监控网络以验证请求和响应。

【讨论】：

我得到的错误不是 $Xhr 的函数。另外，我的服务器响应是 HTTP/1.1 200 OK 当我做我原来的方式时
你用的是什么版本的jQuery？
我使用的是 1.4.4 版本
好吧，这就是为什么 done 不是 $Xhr 的函数。该方法是在 jQuery 版本 1.5 中引入/添加的。与此同时，让我降级我的 jQuery 版本，看看我现在是否可以重现这个问题。您还可以同时升级 jQuery 以查看是否可以解决问题。如果这对您来说是一个可能的选择。
我会升级看看会发生什么

【解决方案2】：

来源：How to work with jQuery AJAX and PHP array return

此链接提到对返回的数据运行 eval 以将其转换为对象。所以，不妨试试：

$.ajax({
type: "POST",
url: "/add.php",
data: 'id=' + itemid,
dataType: "json",
success: function (data) {
    var success_data = eval (data);
    document.getElementById("name").innerHTML = success_data[0];
    document.getElementById("desc").innerHTML = success_data[1];
    document.getElementById("price").innerHTML = success_data[2];
},
error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
}

});

只是一个想法，抱歉，我现在无法测试。

【讨论】：

我在 IE 中遇到了同样的问题。这段代码在 Firefox 中有效
嗯，好的，所以另一个想法是这样的。我使用 POST 查看了我自己的 ajax 代码（我看到您提到这可能是其他地方的问题），我看到的唯一区别是您在 url 之前传递类型。当我在这里查看文档时：api.jquery.com/jQuery.ajax 如果您要发送它，看起来应该在设置之前发送 url。这是您使用 POST 的 AJAX 请求与我的唯一区别，因此值得一试。