JQuery JSONP и понимание, как работает обратный звонок - PullRequest
Новая
       5

JQuery JSONP и понимание, как работает обратный звонок

0 голосов
/ 18 января 2012

Итак, я написал ajax-вызов в github, используя dataType: json, который работал на моей локальной машине, но, похоже, мне нужно использовать dataType: jsonP для решения междоменных проблем.Так может кто-нибудь помочь мне внести необходимые изменения.(Кстати, github поддерживает jsonp dataTypes - https://github.com/pgxn/pgxn-api/wiki/JSONP)

$.ajax({
    url: "https://api.github.com/repos/jeffreycwitt/prollecture1/tags",
    dataType: "jsonp",
    crossDomain: true,
    success: function(returndata) {
        if (returndata.length === 0) {
            $("#versionBox").remove();
        }
        else if (returndata.length === 1) {
            $("#versionBox").remove();
        }
        else {
            $.each(returndata, function() {
                $("#versionBox").show();
                var tag = this["name"];
                console.log(tag);
                var currentVersion = $("#editionNumber").text();
                if (tag.substring(1) === currentVersion) {
                    tag = tag + " (Current Version)";
                }
                var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag;
                $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>");
            });

        }
    }
});

Как я уже сказал, это работало, когда я просто использовал dataType, json, но не работало с jsonP. Я под впечатлениемgithub отправит обратно обычный json, завернутый во что-то, названное параметром обратного вызова, добавленным к вызову ?callback=?. (Этот параметр автоматически добавляется jquery при изменении dataType на jsonp. Так что мне нужно каким-то образом изменить мойФункция успеха для анализа через оболочку?

Ответы [ 2 ]

1 голос
/ 18 января 2012

Ваш код работает, как видно из этой демонстрационной версии .

Проблема в том, что вы пытаетесь получить доступ к свойству .length на returndata объект и такое свойство не существует: 

{
    "data": [
        {
            "tarball_url": "https://github.com/jeffreycwitt/prollecture1/tarball/v0.2",
            "commit": {
                "sha": "46a8aea57cd095a603f194f83cd4a18adcb35908",
                "url": "https://api.github.com/repos/jeffreycwitt/prollecture1/commits/46a8aea57cd095a603f194f83cd4a18adcb35908"
            },
            "name": "v0.2",
            "zipball_url": "https://github.com/jeffreycwitt/prollecture1/zipball/v0.2"
        }
    ],
    "meta": {
        "status": 200,
        "X-RateLimit-Limit": "5000",
        "X-RateLimit-Remaining": "4993"
    }
}

Полагаю, вы имели в виду returndata.data.length, потому что у вас есть свойство data, которое является массивом.

Итак: 

var data = returndata.data;
if (data.length === 0) {
    $("#versionBox").remove();
}
else if (data.length === 1) {
    $("#versionBox").remove();
}
else {
    $.each(data, function() {
        $("#versionBox").show();
        var tag = this["name"];
        console.log(tag);
        var currentVersion = $("#editionNumber").text();
        if (tag.substring(1) === currentVersion) {
            tag = tag + " (Current Version)";
        }
        var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag;
        $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>");
    });
}
0 голосов
/ 18 января 2012

Ответ (специфичный для GitHub, я полагаю) заключается в том, чтобы найти свой путь через дополнительный слой данных, который не включен в обычный вызов json.

Итак, как изменился код.В трех конкретных точках я изменил returndata на returndata.data. 

$.ajax({
url: "https://api.github.com/repos/jeffreycwitt/prollecture1/tags",
dataType: "jsonp",
crossDomain: true,
success: function(returndata) {
    if (returndata.data[0].length === 0) {
        $("#versionBox").remove();
    }
    else if (returndata.data[0].length === 1) {
        $("#versionBox").remove();
    }
    else {
        $.each(returndata.data, function() {
            $("#versionBox").show();
            var tag = this.name;
            console.log(tag);
            var currentVersion = $("#editionNumber").text();
            if (tag.substring(1) === currentVersion) {
                tag = tag + " (Current Version)";
            }
            var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag;
            $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>");
        });

    }
 }
});
...