0

JSONP を使用して 3 つの入れ子になった $.ajax 呼び出しがあります。最初の $.ajax 呼び出しは関数で機能しますが、3 番目はコールバックの実行に失敗し、次のエラーが発生します。Uncaught TypeError: Property 'insertFilmData' of object [object Object] is not a function

コード：

function searchFilms(film, settings) {
if (film === '') {
    console.log("enter a movie");
} else {
    $.ajax({
        type: 'GET',
        url: 'http://api.themoviedb.org/3/configuration?api_key=XXX',
        async: false,
        jsonpCallback: 'getSearchResults',
        contentType: 'application/json',
        dataType: 'jsonp',
        success: function(json) {
            if (json.images) {
                settings.imageData = json.images;
                getSearchResults(json, settings);
            }
        }
    });

    function getSearchResults(data, settings) {
        $.ajax({
            type: 'GET',
            url: 'http://api.themoviedb.org/3/search/movie?api_key=XXX&query=' + film,
            async: false,
            jsonpCallback: 'deliverResults',
            contentType: 'application/json',
            dataType: 'jsonp',
            success: function(json) {
                if (json.total_results !== 0) {
                    deliverResults(json, settings);
                }
            }
        });

        function deliverResults(data, settings) {
            var results = data.results;
            var html = "<ul id='film-search-results' data-role='listview' data-inset='true'>";
            for (var i = 0; i < results.length; i++) {
                var result = results[i];
                var filmId = result.id;
                $.ajax({
                    type: 'GET',
                    url: 'http://api.themoviedb.org/3/movie/' + filmId + '?api_key=XXX&append_to_response=' + settings.extras,
                    async: false,
                    jsonpCallback: 'insertFilmData',
                    contentType: 'application/json',
                    dataType: 'jsonp',
                    success: function(json) {
                        if (json) {
                            settings.html = html;
                            insertFilmData(json, settings);
                        }
                    }
                });

                function insertFilmData(data, settings) {
                    var poster_base_url = settings.imageData.base_url;
                    var poster_size = settings.imageData.poster_sizes[0];
                    var poster_filepath = data.poster_path;
                    var poster_url = poster_base_url + poster_size + "/" + poster_filepath;
                    var html = settings.html + "<li><img src='" + poster_url + "' alt='Poster' /><a  class='ui-link-inherit'><h3 class='ui-li-heading'>" + data.title + "</h3><p class='ui-li-desc'><strong>" + data.tagline + "</strong></p><p class='ui-li-desc'>" + data.overview + "</p></a></li>";

                }
            }
            html = html + "</ul>";
            console.log(html);
            $('#content-add-title').html(html);
            $('#film-search-results').trigger("create");
        }
    }
}
}

クロスドメイン呼び出しに JSONP を使用するのは初めてなので、最初の 2 つのコールバックが発生し、最後の 1 つだけが発生しているため、何が問題なのかわかりません。どんな助けや指示も大歓迎です。ありがとう

4

1 に答える 1

0

呼び出されたメソッドを探してinsertFilmDataいますが、見つかりません。関数を ajax 呼び出しのパラメーターであるオブジェクトのメソッドとして定義すると、おそらく機能します。つまり、次のようになります。

            $.ajax({
                type: 'GET',
                url: 'http://api.themoviedb.org/3/movie/' + filmId + '?api_key=XXX&append_to_response=' + settings.extras,
                async: false,
                jsonpCallback: 'insertFilmData',
                contentType: 'application/json',
                dataType: 'jsonp',
                success: function(json) {
                    if (json) {
                        settings.html = html;
                        insertFilmData(json, settings);
                    }
                },
                insertFilmData: function(data, settings) {
                    var poster_base_url = settings.imageData.base_url;
                    var poster_size = settings.imageData.poster_sizes[0];
                    var poster_filepath = data.poster_path;
                    var poster_url = poster_base_url + poster_size + "/" + poster_filepath;
                    var html = settings.html + "<li><img src='" + poster_url + "' alt='Poster' /><a  class='ui-link-inherit'><h3 class='ui-li-heading'>" + data.title + "</h3><p class='ui-li-desc'><strong>" + data.tagline + "</strong></p><p class='ui-li-desc'>" + data.overview + "</p></a></li>";

                }

            });

jsonpCallback: 'insertFilmData',または、そのままにして、行を に変更することもできますjsonpCallback: insertFilmData,。これは、ajax 呼び出しの引数の 1 つが、関数の名前ではなく、関数自体になることを意味します。（そして、これを正しく理解していれば、関数定義がこの行の下にあることは問題ではありません。これは名前付き関数であり、スコープ内にあるためです。）

于 2013-06-23T17:14:27.130 に答える