Question

嘿所以我几乎是一个jquery / javascript noob，我试图创建一个简单的搜索框，它从OMDB API返回电影数据。遗憾的是，我并不认为它正确地传递了输入数据，所以当我将输入文本传递给变量时，我觉得我做错了，因为它没有传递我放入表单字段的任何内容。有谁知道我在哪里错了？

到目前为止，这是我的代码：

＆＃13;

    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 + " ");
        });
      });
    };

＆＃13;

<form id="searchForm">
  Search for movie:
  <input type="text" name=movie_title id="title">
  <input type="button" value="Submit" onClick="getSearchResult()">
</form>

＆＃13;

Answer 1

你有一个奇怪的混合香草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/

Answer 2

您在代码中犯了一些错误：

获取输入使用的值：

var search = document.getElementById("title").value;

而不是innerHTML

然后，您用来调用API的网址错误，请在使用前查看文档：{{3}}

使用此网址：

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

将输入字段文本放入变量并将其用于jquery JSON get请求

2 个答案: