jquery.每个数组json

Question

我是新来的，这是我的第一个 post，我希望有人能帮助我。我也是 jquery/jquery-mobile、API 和 JSON

的新手

我正在使用 aspx 站点，不知道这是否有帮助。

我正在 jquery 手机的帮助下在手机上搜索电影，API 我的 JSON 文件是一个数组，但我不知道如何获取一次上映不止一部电影。

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

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

Answer 1

对代码工作所做的更改摘要：

您正在使用 $.html('') 清除 $.each() 调用中的 #movie 部分。相反，您应该只在循环外执行一次。
$('#movie') 是以 '#movie' 作为参数执行的 jQuery 函数，它需要处理时间。您可以链接 $.append() 方法以节省处理时间。
$.getJSON(url, callback) 是一种异步方法，只有在 API 完成其工作后，您的 json 变量才会在 callback 函数中可用。
$.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>');
        });
    });
});

jquery.每个数组json

jquery .each array json

arrays

jquery

json

jquery-mobile