jquery를 사용하여 여러 Json 파일에서 데이터를 검색하는 방법

jquery를 사용하여 두 개의 json 파일에서 데이터를 검색하고 HTML 페이지에 표시하려고합니다. 하나의 파일에서 데이터를 검색하지만 두 번째 파일에서는 데이터를 검색하지 않습니다. 잠시 후에 검색하려고하면 작동하지 않습니다. 나는 그것이 jquery에 있다고 생각한다. 나는 꽤 javascript와 jquery에 새로운 것이다.jquery를 사용하여 여러 Json 파일에서 데이터를 검색하는 방법

<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>

어떤 조언이 크게 감사 :

여기 내 코드입니다.

출처

2014-04-18 aazzaawwaazzaa

이것을 하나의 스크립트로 결합해야합니다 ... 이론적으로 동시에 실행하면서 2 회의로드 이벤트가 있습니다. 이것처럼 Reorginize – olexity

여기 몇 가지 문제가 있습니다. 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);

을

출처

2014-04-18 19:54:31

정말 대단한 일을하고있는 것 같아서 고마워, 지금 내가 뭘했는지에 따라 html을 미리 채우는 방법이 아니야. 예를 들어 '

'및'

'어떻게하면 좋을까?

' – aazzaawwaazzaa

두 콜백 모두 동일한 이름을 가지며 전역 범위에 정의됩니다. 후자는 hoisted이고 두 $ .ajax 호출에 사용됩니다. 별도의 스크립트 태그에 포함 시키면 다른 범위로 격리되지 않습니다. 당신은 다음과 같은 것을 수행 할 수 있습니다 http://jsfiddle.net/meqXL/

: 스크립트 태그 모두

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

이 바이올린은 개념을 더 잘 보여 도움이 될 것입니다.

일부 템플릿 라이브러리를 살펴 보길 강력히 권합니다. 귀하의 접근 방식은 매우 조잡합니다.

출처

2014-04-18 19:50:47 lorefnon

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); 

     }

출처

2014-04-18 20:02:58 olexity

작동하지 않는 것 같습니까? – aazzaawwaazzaa

jquery를 사용하여 여러 Json 파일에서 데이터를 검색하는 방법

답변

관련 문제