jQuery 跨域 Ajax

Question

我的ajax代码是

$.ajax({
    type: 'GET',
    dataType: "jsonp",
    processData: false,
    crossDomain: true,
    jsonp: false,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

这是一个跨域ajax请求。

我得到了对该请求的正确响应，在使用 firebug 检查时我可以看到该响应。

这是我在萤火虫响应和通过网络浏览器访问此网址时得到的响应

{"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"}

但是我遇到了错误

SyntaxError: invalid label

{"AuthenticateUserResult":"{\"PKPersonId\":8970,\"Salutation\

我是否需要使用任何其他方法才能使其正常工作。我想在 phonegap+jquery 移动应用中实现这个。

另外，我没有任何访问网络服务的权限

如果我禁用 chrome 网络安全，它可以正常工作

Answer 1

看起来内部 JSON 结构是作为字符串传递的。您必须再次 JSON.parse() 才能将该数据作为对象获取。

try {
  responseData = JSON.parse(responseData);
}
catch (e) {}

编辑： 请尝试以下操作：

$.ajax({
    type: 'GET',
    dataType: "json",
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

Answer 2

不幸的是，这个 Web 服务似乎返回了包含另一个 JSON 的 JSON - 解析内部 JSON 的内容是成功的。解决方案很丑陋，但对我有用。 JSON.parse(...) 尝试转换整个字符串并失败。假设您总是得到以{"AuthenticateUserResult": 开头的答案，并且有趣的数据在此之后，请尝试：

$.ajax({
    type: 'GET',
    dataType: "text",
    crossDomain: true,
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        var authResult = JSON.parse(
            responseData.replace(
                '{"AuthenticateUserResult":"', ''
            ).replace('}"}', '}')
        );
        console.log("in");
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

dataType 必须是 text 非常重要，以防止自动解析您从 Web 服务接收到的格式错误的 JSON。

基本上，我通过删除最上面的大括号和键 AuthenticateUserResult 以及前导和尾随引号来消除外部 JSON。结果是格式良好的 JSON，可供解析。

Answer 3

来自服务器的响应是 JSON 字符串格式。如果将 dataType 设置为 'json' jquery 将尝试直接使用它。您需要将 dataType 设置为“文本”，然后手动解析。

$.ajax({
    type: 'GET',
    dataType: "text", // You need to use dataType text else it will try to parse it.
    url: "http://someotherdomain.com/service.svc",
    success: function (responseData, textStatus, jqXHR) {
        console.log("in");
        var data = JSON.parse(responseData['AuthenticateUserResult']);
        console.log(data);
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

Answer 4

如果您打算使用JSONP，您可以使用为此而设计的getJSON。 jQuery 有JSONP 的辅助方法。

$.getJSON( 'http://someotherdomain.com/service.svc&callback=?', function( result ) {
       console.log(result);
});

阅读以下链接

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

Basic example of using .ajax() with JSONP?

Basic how-to for cross domain jsonp

Answer 5

这是我的代码中的 sn-ps.. 如果它解决了你的问题..

客户代码：

设置 jsonpCallBack : 'photos' 和 dataType:'jsonp'

 $('document').ready(function() {
            var pm_url = 'http://localhost:8080/diztal/rest/login/test_cor?sessionKey=4324234';
            $.ajax({
                crossDomain: true,
                url: pm_url,
                type: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'photos'
            });
        });
        function photos (data) {
            alert(data);
            $("#twitter_followers").html(data.responseCode);
        };

服务器端代码（使用 Rest Easy）

@Path("/test_cor")
@GET
@Produces(MediaType.TEXT_PLAIN)
public String testCOR(@QueryParam("sessionKey") String sessionKey, @Context HttpServletRequest httpRequest) {
    ResponseJSON<LoginResponse> resp = new ResponseJSON<LoginResponse>();
    resp.setResponseCode(sessionKey);
    resp.setResponseText("Wrong Passcode");
    resp.setResponseTypeClass("Login");
    Gson gson = new Gson();
    return "photos("+gson.toJson(resp)+")"; // CHECK_THIS_LINE
}

Answer 6

您只需要像这样使用JSON.parse 解析字符串：

var json_result = {"AuthenticateUserResult":"{\"PKPersonId\":1234,\"Salutation\":null,\"FirstName\":\"Miqdad\",\"LastName\":\"Kumar\",\"Designation\":null,\"Profile\":\"\",\"PhotoPath\":\"\/UploadFiles\/\"}"};

var parsed = JSON.parse(json_result.AuthenticateUserResult);
console.log(parsed);

在这里你会有这样的东西：

Designation
null

FirstName
"Miqdad"

LastName
"Kumar"

PKPersonId
1234

PhotoPath
"/UploadFiles/"

Profile
""

Salutation
null

对于请求，不要忘记设置 dataType:'jsonp' 并在您网站的根目录中添加一个名为 crossdomain.xml 的文件，其中包含：

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

<!-- Most restrictive policy: -->
<site-control permitted-cross-domain-policies="none"/>

<!-- Least restrictive policy: -->
<!--
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
-->
</cross-domain-policy>

编辑以处理Sanjay Kumar POST

因此您可以使用jsonpCallback 设置要在JSONP 中调用的回调函数！

$.Ajax({
    jsonpCallback : 'your_function_name',
    //OR with anonymous function
    jsonpCallback : function(data) {
        //do stuff
    },
    ...
});

Answer 7

当使用“jsonp”时，您基本上会返回包装在函数调用中的数据，类似于

jsonpCallback([{"id":1,"value":"testing"},{"id":2,"value":"test again"}])
where the function/callback name is 'jsonpCallback'.

如果您有权访问服务器，请先验证响应的"jsonp"格式是否正确

对于来自服务器的此类响应，您还需要在 ajax 调用中指定一些内容，例如

jsonpCallback: "jsonpCallback",  in your ajax call

请注意，回调的名称不必是“jsonpCallback”，它只是作为示例选择的名称，但它需要与服务器端完成的名称（包装）匹配。

我对您的问题的第一个猜测是服务器的响应不是应该的。