嘿,所以我几乎是一个jquery/javascript菜鸟,我试图创建一个简单的搜索框,它从OMDB API
返回电影数据。可悲的是,我认为它没有正确传递输入数据,所以我觉得在将输入文本传递到变量时我做错了什么,因为它没有传递我放入表单字段的任何内容。有谁知道我在这里出了什么问题?
这是我到目前为止的代码:
function getSearchResult() {
var search = document.getElementById("title").innerHTML;
jQuery.getJSON("http://www.omdbapi.com/?t=" + search + "=json", function(result) {
jQuery.each(result, function(i, field) {
jQuery("div").append(field + " ");
});
});
};
<form id="searchForm">
Search for movie:
<input type="text" name=movie_title id="title">
<input type="button" value="Submit" onClick="getSearchResult()">
</form>
你在代码中犯了一些错误:
要获取输入的值,请使用:
var search = document.getElementById("title").value;
而不是内部HTML
然后,您用于调用 API 的 url 错误,请在使用之前查看文档:http://www.omdbapi.com/
使用此网址:
"http://www.omdbapi.com/?t=" + search + "&y=&plot=short&r=json"
完整代码
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script>
$(function() {
$('#search').on('click', function() {
var search = document.getElementById("title").value;
$.getJSON(
"http://www.omdbapi.com/?t=" + search + "&y=&plot=short&r=json",
function(result) {
$.each(result, function(i, field){
$("body").append(field + " ");
});
}
);
});
});
</script>
</head>
<body>
Search for movie:<input type="text" name="movie_title" id="title" />
<input type="button" id="search" value="Submit" />
</body>
</html>
vanilla JS和jQuery;考虑改变你的方法,以充分利用jQuery为你提供的工具。 请在下面找到可能有助于指向该方向的代码(请注意对 HTML 的更新和 onClick 对按钮本身的附件):
.JS:
$('#searchForm input[type="button"]').on('click', function(){
var search = $('#searchForm input').text();
var searchResult = $('#searchResult'); //save reference to DOM object
$.getJSON("https://www.omdbapi.com/?t=" + search + "=json", function(response){
console.log(response);
searchResult.empty();
if(response.Response === 'False') {
searchResult.append('<p>'+response.Error+'</p>');
} else {
$.each(result, function(i, field){
searchResult.append('<p>'+field+'</p>');
});
}
});
});
.HTML:
<form id="searchForm">
Search for movie:<input type="text" name=movie_title id="title">
<input type="button" value="Submit" >
</form>
<div id="searchResult"></div>
您可以在此处运行它(尽管我的快速搜索都没有返回结果,因此我无法验证成功条件):https://jsfiddle.net/wct58tco/