php - Javascript、AJAX 和 JSON 问题

Question

我是一名 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:解析错误

Answer 1

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

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

<小时/>

观察结果

在 Firebug 控制台中写入以下内容:

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

也会产生语法错误。 (理想情况下，您应该将问题范围缩小到此!)

有趣的是，更明确地构造一个对象确实有效(对于此输入):

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

就像强制输入成为某种带有括号的表达式一样:

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

<小时/>

说明

这一切都归结为 ECMAScript 标准 12.4 中的这一声明:

Note that an ExpressionStatement cannot start with an opening curly brace because that might make it ambiguous with a Block.

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