Question

我正在尝试使用jquery从两个json文件中检索数据并将其显示在html页面中。我有它从一个文件而不是第二个文件中检索数据。当我尝试从一秒钟检索时，它将无法正常工作。我认为这取决于jquery。我是javascript和jquery的新手。

这是我的代码：

<html><head>

             <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/javascript">      


               var apikey = "qqye3xdazwafg573shyyew6k";
               var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";

               // construct the uri with our apikey
               var query = "771362176";
            var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;

            $(document).ready(function () {

                // send off the query
                $.ajax({
                    url: baseUrl + query + moviesSearchUrl,
                    dataType: "jsonp",
                    success: searchCallback
                });
            });

            // callback for when we get back the results
            function searchCallback(data) {

                $('#title').text(data.title);
                $("#movie_img").attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
                $('#genres').text(data.genres[0]);
                $('#release_dates').text(data.release_dates.theater);
                $('#mpaa_rating').text(data.mpaa_rating);
                $('#critics_consensus').text(data.critics_consensus);
                $('#critics_score').text(data.ratings.critics_score);
                $('#audience_score').text(data.ratings.audience_score);

                var director = "";
                for (var i = 0; i < data.abridged_directors.length; i++) {
                    if (i != 0 && i == data.abridged_directors.length - 1) {
                        // and the position of the character is greater than 0
                        director += '& ' + data.abridged_directors[i].name;
                    }
                    else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                        director += data.abridged_directors[i].name + ', ';
                    }
                    else
                        director += data.abridged_directors[i].name + ' ';
                }
                $('#director').text(director);

                var cast = "";
                for (var i = 0; i < data.abridged_cast.length; i++) {
                    cast += data.abridged_cast[i].name + " as ";
                    for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                        if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += data.abridged_cast[i].characters[j];
                        }
                        else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += '& ' + data.abridged_cast[i].characters[j];
                        }
                        else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                            cast += data.abridged_cast[i].characters[j] + ' ';
                        }
                        else cast += data.abridged_cast[i].characters[j] + ', ';
                    }
                }
                $('#cast').text(cast);
                $('#description').text(data.synopsis);

            }
 </script>

    <script type="text/javascript">      


               var apikey = "qqye3xdazwafg573shyyew6k";
               var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";

               // construct the uri with our apikey
               var query2 = "771311994";
            var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;

            $(document).ready(function () {

                // send off the query
                $.ajax({
                    url: baseUrl + query2 + moviesSearchUrl,
                    dataType: "jsonp",
                    success: searchCallback
                });
            });

            // callback for when we get back the results
            function searchCallback(data) {

                $('#title2').text(data.title);
                $("#movie_img2").attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
                $('#genres2').text(data.genres[0]);
                $('#release_dates2').text(data.release_dates.theater);
                $('#mpaa_rating2').text(data.mpaa_rating);
                $('#critics_consensus2').text(data.critics_consensus);
                $('#critics_score2').text(data.ratings.critics_score);
                $('#audience_score2').text(data.ratings.audience_score);

                var director = "";
                for (var i = 0; i < data.abridged_directors.length; i++) {
                    if (i != 0 && i == data.abridged_directors.length - 1) {
                        // and the position of the character is greater than 0
                        director += '& ' + data.abridged_directors[i].name;
                    }
                    else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                        director += data.abridged_directors[i].name + ', ';
                    }
                    else
                        director += data.abridged_directors[i].name + ' ';
                }
                $('#director2').text(director);

                var cast = "";
                for (var i = 0; i < data.abridged_cast.length; i++) {
                    cast += data.abridged_cast[i].name + " as ";
                    for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                        if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += data.abridged_cast[i].characters[j];
                        }
                        else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += '& ' + data.abridged_cast[i].characters[j];
                        }
                        else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                            cast += data.abridged_cast[i].characters[j] + ' ';
                        }
                        else cast += data.abridged_cast[i].characters[j] + ', ';
                    }
                }
                $('#cast2').text(cast);
                $('#description2').text(data.synopsis);

            }
 </script>
 </head<body>

     <h3 id="title">
     </h3>
            <strong>
     Release Date: </strong><span id="release_dates"></span><br />
            <img id="movie_img" src="no_image.jpg" alt="movie image" /><br />     
            <strong>Genre: </strong><span id="genres"></span><br />
            <strong>MPAA: </strong><span id="mpaa_rating"></span><br />
            <strong>Critics Consensus: </strong><span id="critics_consensus"></span><br />
            <strong>Critics Score: </strong><span id="critics_score"></span><br />
            <strong>Audience Score: </strong><span id="audience_score"></span><br />
            <strong>Actors: </strong><span id="cast"></span><br />
            <strong>Director(s): </strong><span id="director"></span><br />
            <strong>Description: </strong><span id="description"></span><br />  

     <h3 id="title2">
     </h3>
            <strong>
     Release Date: </strong><span id="release_dates2"></span><br />
            <img id="movie_img2" src="no_image.jpg" alt="movie image" /><br />     
            <strong>Genre: </strong><span id="genres2"></span><br />
            <strong>MPAA: </strong><span id="mpaa_rating2"></span><br />
            <strong>Critics Consensus: </strong><span id="critics_consensus2"></span><br />
            <strong>Critics Score: </strong><span id="critics_score2"></span><br />
            <strong>Audience Score: </strong><span id="audience_score2"></span><br />
            <strong>Actors: </strong><span id="cast2"></span><br />
            <strong>Director(s): </strong><span id="director2"></span><br />
            <strong>Description: </strong><span id="description2"></span><br />  
            </body>                          </html>

任何建议都非常感谢。

Answer 1

两个回调都具有相同的名称，并在全局范围内定义。后者是hoisted并用于$ .ajax调用。将它们放在单独的脚本标记中不会将它们隔离到不同的范围。

这个小提琴应该有助于更好地说明这个概念：http://jsfiddle.net/meqXL/

您可能希望执行以下操作：

<script type="text/javascript"> 
(function(){
  // Code inside
})()
</script>

用于两个脚本标记。

我还强烈建议你看看一些模板库。你的方法很粗糙。

Answer 2

这里有几个问题。 AJAX工作正常。真正的问题：您定义两次的函数searchCallback(data)。浏览器可能会采用最后一个定义，并在您调用它的每个位置使用它。所以它发生得非常快，所以你可能无法看到它，但它会加载第一个调用，将其放入页面然后加载第二个调用并将数据加载到相同的容器中。

如果更改第89行： success: searchCallback到success: searchCallback2 和第94行： function searchCallback(data) {到function searchCallback2(data) { 你会发现它有效。我建议你删除其中一个函数并修改另一个函数，这样它就需要一个数据和容器ID，并根据你给它的内容预先填充它们：

function searchCallback(data, id) { $('#title' + id).text(data.title);

等

Answer 3

var apikey = "qqye3xdazwafg573shyyew6k";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";
var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;
var query = "771362176";
var query2 = "771311994";
var counter = 1;

        $(document).ready(function () {

            // send off the query
            $.ajax({
                url: baseUrl + query + moviesSearchUrl,
                dataType: "jsonp",
                success: searchCallback
            });
            counter++; 
             $.ajax({
                url: baseUrl + query2 + moviesSearchUrl,
                dataType: "jsonp",
                success: searchCallback
            });
            counter++;

        });

        // callback for when we get back the results
        function searchCallback(data) {

            $('#title'+counter).text(data.title);
            $("#movie_img"+counter).attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
            $('#genres'+counter).text(data.genres[0]);
            $('#release_dates'+counter).text(data.release_dates.theater);
            $('#mpaa_rating'+counter).text(data.mpaa_rating);
            $('#critics_consensus'+counter).text(data.critics_consensus);
            $('#critics_score'+counter).text(data.ratings.critics_score);
            $('#audience_score'+counter).text(data.ratings.audience_score);

            var director = "";
            for (var i = 0; i < data.abridged_directors.length; i++) {
                if (i != 0 && i == data.abridged_directors.length - 1) {
                    // and the position of the character is greater than 0
                    director += '& ' + data.abridged_directors[i].name;
                }
                else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                    director += data.abridged_directors[i].name + ', ';
                }
                else
                    director += data.abridged_directors[i].name + ' ';
            }
            $('#director'+counter).text(director);

            var cast = "";
            for (var i = 0; i < data.abridged_cast.length; i++) {
                cast += data.abridged_cast[i].name + " as ";
                for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                    if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                        cast += data.abridged_cast[i].characters[j];
                    }
                    else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                        cast += '& ' + data.abridged_cast[i].characters[j];
                    }
                    else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                        cast += data.abridged_cast[i].characters[j] + ' ';
                    }
                    else cast += data.abridged_cast[i].characters[j] + ', ';
                }
            }
            $('#cast'+counter).text(cast);
            $('#description'+counter).text(data.synopsis);

        }

如何使用jquery从多个Json文件中检索数据

3 个答案: