如何处理来自ajax调用的json响应答案

【问题标题】：How to process json response from ajax call如何处理来自ajax调用的json响应
【发布时间】：2013-04-12 10:53:38
【问题描述】：

我的网络服务返回一个 JSON 对象，如下所示

["abc","xyz","option_3"]

即当我把这个地址放在 chrome 浏览器 http://localhost:8088/rest/getOptions 我上面。

我正在尝试在浏览器中阅读此内容，以便创建一个下拉选项...但我从下面的代码中一无所获：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        url="http://localhost:8088/rest/getOptions";
        var ajaxResult = null;
        function getData(yt_url){
            $.ajax
            ({
                type: "GET",
                url: yt_url,
                dataType:"json",
                async: false,
                success: function(response){
                    ajaxResult = response;
                }
            });
        }
        getData(url);

    alert(ajaxResult);

    </script>
</head>
<body>
</body>
</html>

我总是在警告框中收到null。我用 fiddler2 仔细检查了 web 服务请求/响应是否正常，我什至可以拦截 web 服务和浏览器之间的 json 对象。

我也试过了

var obj = JSON.parse(ajaxResult);
alert(obj);

我又得到了 null。

我已经看过Ajax call for the json response 和类似的问题。请看我的 JSON 有点不同，所以这些解决方案要么不适用于我的案例，要么我没有遵循它们。

我是 AJAX 和 Java 脚本的新手，请指教。

编辑： 添加服务于这个 rest/getOptions 端点的 JERSEY 网络服务代码

@GET
@Path("getOptions")
@Produces(MediaType.APPLICATION_JSON)
public List<String> getOptionsJson() {
    //build alloptions List<String>
    return alloptions ;
}

【问题讨论】：

当您使用jsonp 时，您的webservice 是否使用callback 参数传递的信息包装数据？
Jon - 他将 Async 设置为 false，假设其余代码正常，他的警报应该可以工作
不，它没有 .. 我之前使用的是 json，我开始在 chrome 中出现访问错误，所以我开始使用 jsonp .. 但我要编辑这个问题，因为我得到了同样的错误当我在 Firefox 中使用 json 时。
如果有帮助，我可以使 async:true...请在这里帮助一个菜鸟:)

标签： jquery html ajax rest jersey

【解决方案1】：

更新

您编辑了问题；您不能使用dataType: 'json'，因为跨域问题只能通过在同一域上使用代理或通过CORS 来解决。

当您使用dataType: 'jsonp' 时，您不能使用async: false；这是因为它并没有真正使用XMLHttpRequest，而是使用<script> 标签使其跨域。我相信 jQuery 只是忽略了async 设置而不发出警告。

因此，alert() 将始终为空，您应该将其移动到成功回调中。

要支持 JSONP，您的 Web 服务必须将返回的数据包装到函数调用中，由 callback GET 参数标识，例如

callback([1, 2, 3])

如果您的网络服务不支持此功能，如前所述，您需要使用CORS，例如添加这个响应头：

Access-Control-Allow-Origin: *

【讨论】：

谢谢！有没有办法让它在不接触 web 服务代码的情况下工作？
@Watt 如果服务不提供 JSONP 支持，您将不得不使用 CORS。
如果不是太麻烦，你能给我有问题的代码的工作版本吗？因为，我不确定如何做回调（[]）或使用 CORS。为了澄清，我也添加了代码的 Web 服务端。
@Watt 抱歉，我不精通 Java，但添加响应标头应该是您 Web 服务器中的简单配置。
@Watt 代码应该可以正常工作，但是不应该使用同步 ajax，因为它会降低用户体验。