AJAX不解析jsonp响应

时间:2019-01-24 22:29:46

标签: jquery ajax gracenote

不幸的是,在制作电影供稿页面时,我能够找到的唯一API的每天通话次数限制为50次,因此我需要在本地缓存jsonp响应,然后直接对其进行解析,以解决通话限制并刷新在指定时间的放映时间。

我的问题是,从缓存的jsonp文件加载数据无法显示任何内容,但是直接加载的数据显示得很好。

这是我目前拥有的用于解析缓存的jsonp文件的脚本

<script>
// construct the url with parameter values, do not need API keying information, this data is cached and requested once a day by the server
     var baseUrl = "https://example.com";
     var showtimesUrl = baseUrl + '/movie-data/gracenote-sample.jsonp';

     $(document).ready(function() {

       // send off the query
       $.ajax({
           url: showtimesUrl,
           data: {jsonp: "dataHandler",},           
           dataType: "jsonp",
           success: function( data ) {
               console.log( data ); // server response
           }
       }
       );
     });

     // callback to handle the results
     function dataHandler(data) {
      $(document.body).append('<p>Found ' + data.length + ' movies showing within 2 miles of Hacienda Crossings:</p>');
      var movies = data.hits;
      $.each(data, function(index, movie) {
        var movieData = '<div class="MovieListingWrapper"><img class="movie-poster" src="http://movies.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><h2 class="MovieTitle">'+movie.title+'</h2>';
        movieData += movie.title;
        if (movie.ratings) { movieData += ' (' + movie.ratings[0].code + ') </div>' };
        $(document.body).append(movieData);
      });
     }  

响应发送回标准jsonp文件,并且与我从API获得的响应完全匹配。下面是我用来请求当前数据而非缓存的脚本。

<script>
// construct the url with parameter values
     var apikey = "nope.avi";
     var baseUrl = "http://data.tmsapi.com/v1.1";
     var showtimesUrl = baseUrl + '/movies/showings';
     var zipCode = "12345";
     var radius = "2";
     var imageSize = "Md";
     var imageText = "true";
     var d = new Date();
     var today = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();


     $(document).ready(function() {

       // send off the query
       $.ajax({
        url: showtimesUrl,
            data: { startDate: today,
                zip: zipCode,
              radius: radius,
                api_key: apikey,
              jsonp: "dataHandler",
               },
        dataType: "jsonp",
       });
     });

     // callback to handle the results
     function dataHandler(data) {
      $(document.body).append('<p>Found ' + data.length + ' movies showing within 2 miles of ' + zipCode+':</p>');
      var movies = data.hits;
      $.each(data, function(index, movie) {
        var movieData = '<div class="MovieListingWrapper"><img class="movie-poster" src="http://movies.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><h2 class="MovieTitle">'+movie.title+'</h2>';
        movieData += movie.title;
        if (movie.ratings) { movieData += ' (' + movie.ratings[0].code + ') </div>' };
        $(document.body).append(movieData);
      });
     }  

但是,加载API数据的缓存变体的版本拒绝显示任何内容,并且在错误控制台中未显示任何内容。但是直接从API加载的版本可以正常工作并正确显示数据。

我会在此处发布jsonp响应,但这是一个巨大的响应。如果您愿意,我很乐意PM一个直接文件。

1 个答案:

答案 0 :(得分:0)

我发现从API复制json响应的原始脚本未正确记录回调函数。我只需要用dataHandler函数包装它。