2017-01-19 72 views
1

我在這裏新的,這是我的第一篇文章,我希望有人能幫助我。 即時通訊還新jquery/jquery手機,API和JSONjquery .each array json

即時通訊使用aspx網站,不知道這是否是一個幫助。

即時通過jquery mobile,API和我的JSON文件的幫助在移動設備上搜索電影是一個數組,但我不能找出如何在同一時間獲得更多1個電影。

所以我希望有人能幫助我。

$(document).ready(function() { 
 

 
    $("#Search_B").click(function() { 
 

 
     $("#intro_h3").hide(); 
 

 
     var S_Value = $('#GetMovies').val(); 
 
     var url = 'http://www.omdbapi.com/?s=' + S_Value; 
 
     var json = $.getJSON(url); 
 

 
     console.log(url); 
 

 

 
     $("#Search_B").each(json, function(i, value) { 
 

 
     $('#movie').html(''); 
 
     $('#movie').append('<h2> Title: ' + value.Search[0].Title + ' </h2>'); 
 
     $('#movie').append('<h3> Year: ' + value.Search[0].Year + ' </h3>'); 
 
     $('#movie').append('<h3> Type: ' + value.Search[0].Type + ' </h3>'); 
 
     $('#movie').append('<a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> <img src=' + movie.Search[0].Poster + ' /> </a>'); 
 
     $('#movie').append('<br><a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> Imdb </a>'); 
 
     }); 
 

 
    }); 
 

 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head runat="server"> 
 
    <title></title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 

 
     <div data-role="page" id="page1"> 
 
     <div data-role="header"> 
 
      <h1>Welcome to the online movie searcher</h1> 
 
      <div data-role="navbar"> 
 
      <ul> 
 
       <li><a href="#page1">Home</a> 
 
       </li> 
 
       <li><a href="#page2">Options</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 

 
     <div data-role="main" class="ui-content"> 
 

 
      <!-- <input type="text" id="EnterMovie" /> --> 
 
      <input type="search" id="GetMovies" /> 
 
      <input type="button" id="Search_B" value="Search" /> 
 

 
      <div id="movie"></div> 
 

 

 
      <h3 id="intro_h3">Search for a movie up top!</h3> 
 

 

 
     </div> 
 

 
     <div data-role="footer"> 
 
      <h1>My Footer</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

回答

1

到代碼工作中取得的變動摘要:

  • 您正在使用$.html('')清除$.each()調用內部的#movie部分。相反,你應該只在循環之外進行一次。

  • $('#movie')'#movie'作爲參數正在執行的jQuery函數,它需要處理時間。你可以$.append()方法來節省過程的時間。

  • $.getJSON(url, callback)是一個異步方法,您json變量將可裏面callback功能的API已經完成其工作之後。

  • $.each(array, function(key, val) {})將無法​​使用JSON對象作爲數組。第一個參數必須是可迭代的json.Search

你的最終代碼應該是這樣的:

$(document).ready(function() { 
    $("#Search_B").click(function() { 
    $("#intro_h3").hide(); 
    $('#movie').html(''); 

    var S_Value = $('#GetMovies').val(); 
    var url = 'http://www.omdbapi.com/?s=' + S_Value; 

    $.getJSON(url, function waitAPIthen (json) { 
     $.each(json.Search, function (key, item) { 
      $('#movie') 
      .append('<h2> Title: ' + item.Title + ' </h2>') 
      .append('<h3> Year: ' + item.Year + ' </h3>') 
      .append('<h3> Type: ' + item.Type + ' </h3>') 
      .append('<a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> <img src=' + item.Poster + ' /> </a>') 
      .append('<br><a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> Imdb </a>'); 
     }); 
    }); 
}); 
+0

THX不知道這:) ,我也更換value.Search [0]到value.Search [I],但它仍然不工作:/但thx – Panzer

+0

循環正在執行一次或沒有? –

+0

根本沒有,就像按鈕不工作。我可以按它,但沒有任何反應 – Panzer