Geek Answers Handbook

"Invalid label" when using JSONP?

I have a problem with my JSONP request. Data will not be displayed, Firebug shows an "incorrect label" error.

enter image description here

My JavaScript:

$.ajax({
    url: link,
    dataType: "jsonp",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    jsonpCallback: "getResources"
})

function getResources(data) {
    alert(data);
    alert(JSON.parse(data));
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}

My JSON:

{
    "groupStatus": [
        {
            "id": "Application Layer Configuration-ApplicationLayer",
            "time": 1332755316976,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        },
        {
            "id": "Application Layer-ApplicationLayer:nscalealinst2",
            "time": 1333431531046,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        }
    ]
}

My HTML:

<html>
<head>
    <title>Monitor</title>
    <link href="css/gadget.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="js/gadget.js"></script>
</body>

The request works fine, but in any case, the data is not displayed.

enter image description here

Im looking for a solution in a few days. Can anyone help me? Thank you in advance!

SOLUTION (update: 09/06/12)

I solved this problem. The server (REST interface) on which it was executed does not have a callback function. Another way to configure crossdomain queries without using JSONP is to set the following jquery variable:

jQuery.support.cors = true;
+5
source share
2 answers

JSONP JSON , URL-. jQuery " " , , script - :

// assuming that $JSON contains your JSON content
print "{$_REQUEST['callback']}( {$JSON} );";

, JSONP script, DOM, , XMLHttpRequest. JSONP , , ( ) XHR.

+7

AJAX script , dataType: "json" :

function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});​

AJAX script , JSONP - JSON, :

callback(
    {
        "groupStatus": []
    }
);​

JSON, , JSONP <script src="...">. , JSON , :

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})​
+1

More articles:


All Articles