Javascript、AJAX 和 JSON 的问题答案

【问题标题】：Problem with Javascript, AJAX & JSONJavascript、AJAX 和 JSON 的问题
【发布时间】：2011-08-14 14:19:26
【问题描述】：

我是一名 iPhone 开发人员，对 Web 开发很陌生，所以如果我在这里犯了愚蠢的错误，请原谅我：

我想要完成的是，当用户从下拉列表中选择一个项目时，它会调用一些 javascript，这会向我拥有的 PHP 文件发出 AJAX 请求，该文件返回一些 JSON。 - 该 JSON 包括缩略图文件名和图像标题。这些需要分别传入我的文档中的图像和文本字段。

问题是，在尝试评估 json 后它失败了。 - eval(json); 和 JSON.parse(json); 也是如此，我通过调用 document.write('something'); 解决了这个问题。定期在我的响应方法中。 - 它总是能够写到它解析 json 的地步。

我确定我的 PHP 是有效的并且我的请求是好的（我可以很好地输出 JS 的响应）。

这是我在下拉列表中选择新项目时调用的函数：

function changeImage(id){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var res=xmlhttp.responseText;
        var responseObject = eval(res);
        var caption = responseObject.caption;
        var textField = document.getElementById('caption');
        textField.value = caption;
        var imagePreview = document.getElementById('imgPreview');
        imagePreview.src = responseObject.filename;
        }
      }
    xmlhttp.open("GET","getCaption.php?id="+id,true);
    xmlhttp.send();
}

当我输出 res（或手动访问 php 文件）时，JSON 看起来像这样：

{"caption":"A caption","filename":"myimage_thumb.jpg"}

为什么 JSON 评估失败？

更新： 记录此错误：SyntaxError: Parse error

【问题讨论】：

“失败”是什么意思？是否发生 Javascript 错误，浏览器是否崩溃，是否弹出错误消息...
'Something like this' - 也许您可能想将完整的输出传递给jsonlint.com。
@Codo - 查看更新的问题（抱歉应该检查控制台）
如果是解析错误，你真的应该发布完整的输出，以便可以看到错误在哪里。
@pimvdb - 这是完整的输出，刚刚检查过 - 它是有效的

标签： php javascript ajax json xmlhttprequest

【解决方案1】：

您正在获取一个 JSON 字符串并假装它是一个 Javascript 对象文字。但是，请记住，JSON 只是以 Javascript 的对象表示法命名的！

然后您希望eval 会直接评估它并返回一个对象，但事实并非如此。

观察

在 Firebug 控制台中编写以下内容：

eval('{"caption":"A caption","filename":"myimage_thumb.jpg"}')

也会产生一个 SyntaxError。（理想情况下，您可以将问题缩小到这个范围！）

有趣的是，更明确地构造一个对象确实有效（对于这个输入）：

eval('new Object({"caption":"A caption","filename":"myimage_thumb.jpg"})')

就像用括号强制输入成为某种表达式一样：

eval('({"caption":"A caption","filename":"myimage_thumb.jpg"})')

说明

这一切都归结为 ECMAScript 标准 12.4 中的这句话：

请注意，ExpressionStatement 不能以左大括号开头，因为这可能会使它与 Block 混淆。

This article 深入解释了这个问题，但总结起来解决方案是使用JSON.parse(res) 从 JSON 字符串中获取对象。这是正确的方法，只要您的输入是有效的 JSON，它就不会失败。

【讨论】：

托马拉克的一个很好的解释！ +1 :-)
@Thrustmaster：谢谢！只需要一点研究.. :)

【解决方案2】：

更改评估行：

eval('var responseObject = ' + res);

【讨论】：

或：var responseObject = eval('(' + res + ')');

【解决方案3】：

你可能想试试：

eval("(" + res + ")");

以便将其包装在(...) 中。我还不知道为什么。

无论如何，你也可以看看 jQuery，因为它很简单：

$.getJSON("path", function(json) {
    // json is the ready-to-use object
});

【讨论】：

【解决方案4】：

在这种情况下我会给出一些建议

您可以尝试使用console.log(res) 或alert(res)，以便在尝试使用之前知道自己确实拥有res。
永远不要使用eval(res)。为什么不使用JSON.parse(res)（在现代浏览器上，因为你有太多的IE5浏览器），或者更好的$.parseJSON（如果使用jQuery）
如果您从 PHP 发送 if，请使用 json_encode($var, JSON_HEX_TAG|JSON_HEX_APOS) 以防止解析时出现语法错误。在另一个线程中检查我的答案（下面的链接）。

How to store a php array on the client side?

【讨论】：

【解决方案5】：

这就是我使用 eval 的方式 -

var rsltObj = eval('(' + jsonStr + ')');

【讨论】：