从 imdbapi 导入 imdb id 时自动填写表单

Question

我有以下表格：

我希望当您输入 imdb_id 时，我会调用 imdb API 并通过 ID 获取其余信息，以便在 ID 不存在时自动填写表格'不匹配的用户将自己填写表格。

Answer 1

我使用 OMDb API 创建了一个非常简单的实现，我猜这就是您正在使用的 API。
由于我没有 API 的会员资格，我使用模拟数据创建了这个演示，但是如果您将 API 键放入代码并将模拟数据的解析替换为响应。

我的js：

var mockAladinData = '{"Title":"Aladin","Year":"2009","Rated":"N/A","Released":"30 Oct 2009","Runtime":"132 min","Genre":"Action, Adventure, Comedy","Director":"Sujoy Ghosh","Writer":"Vishal Dadlani (lyrics), Sujoy Ghosh (screenplay), Suresh Nair (additional story), Ritesh Shah (dialogue), Ritesh Shah (story)","Actors":"Amitabh Bachchan, Sanjay Dutt, Riteish Deshmukh, Jacqueline Fernandez","Plot":"Since he was a child, Aladin Chatterjee has been teased for his fairytale name. As a college student he follows his namesake\'s footsteps; unleashing genie Genius and wooing exchange student Jasmine. But the evil Ringmaster approaches.","Language":"Hindi","Country":"India","Awards":"3 wins.","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTQxMjY4NzUyM15BMl5BanBnXkFtZTcwMDI4NTk5Mw@@._V1_SX300.jpg","Ratings":[{"Source":"Internet Movie Database","Value":"4.6/10"}],"Metascore":"N/A","imdbRating":"4.6","imdbVotes":"2,075","imdbID":"tt1227762","Type":"movie","DVD":"08 Mar 2011","BoxOffice":"N/A","Production":"Eros International","Website":"http://www.aladin.erosentertainment.com/","Response":"True"}';

$("button").on("click", function(event) {
  event.preventDefault();
  var value = $(".movie-id")[0].value.trim(),
    keys = ["Year", "Title"];
  if (value) {
    var url = "https://www.omdbapi.com/?i=" + value + "&apikey={your api key}";
    $.ajax({
      url: url,
      error: function() {
        $(".error-msg").show();
      },
      success: function(response) {
      response = JSON.parse(mockAladinData);
        if (response.Response != "False") {
          $(".error-msg").hide();
          for (var i = 0; i < keys.length; i++) {
            $(".movie-" + keys[i].toLowerCase())[0].value = response[keys[i]];
          }
        } else {
          $(".result-msg").show();
        }
      },
      type: 'GET'
    });
  }
});

我的Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="movie-form">
  <div>IMDb movie id (example: tt1227762)</div>
  <input class="movie-id" type="text"><button>Enter</button>
  <div class="error-msg msg">Error</div>
  <div class="result-msg msg">No results</div>
  <div>Movie Title</div>
  <input class="movie-title input" type="text">
  <div>Movie year</div>
  <input class="movie-year input" type="text">
</form>
<div>some more input fields</div>

我的CSS:

.input {
  display: block;
}
.msg {
  display: none;
}

从 imdbapi 导入 imdb id 时自动填写表单

Automatically fill in form when importing an imdb id from imdbapi

javascript

ajax

jquery

laravel-5.3