Question

我正在尝试制作一个可以使用Google Books API搜索图书详细信息的简单网络应用。该守则似乎很好，但我不明白我错过了什么？这是参考代码。： -

$(document).ready(function(){
$("#myform").submit(function(){

var search = $("#books").val();
if(search=='')
{
 alert("Please enter something in the field");

}   
else{
    var url='';
    var img='';
    var title='';
    var author='';

    console.log("Search for "+search);

    $.get("https://www.googleapis.com/books/v1/volumes?q="+search,function(response){

          for(i=0;i<response.items.length;i++){

              title=$('<h5>'+response.items[i].volumeInfo.title + '</h5>');
              author=$('<h5>'+response.items[i].volumeInfo.authors + '</h5>');
              img=$('<img><a href=' + response.items[i].volumeInfo.infoLink + '><button>Read More</button></a>');
              url=response.items[i].volumeInfo.imageLinks.thumbnail;

              img.attr('src',url);

              title.appendTo("#result");
              author.appendTo("#result");
              img.appendTo("#result");

          }

    }); 

}
});
return false;
});

以下是参考的HTML代码：

<head>
<meta charset="UTF-8">
<title>Your Personal Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Antic'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">


<link rel="stylesheet" href="style.css">

</head>

<body bgcolor="#232733">

<div align="center">


<div class="login">
<h1>The School Bag</h1>
<form id="myform">
<input type="search" id="books" placeholder="Type the book name" required="required" />

<button class="btn btn-primary btn-block btn-large" >Submit</button>
</form>
</div>

<div id="result">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="myscript.js"></script>

<!--<script src="scripts/googlebooks.js"></script>-->
<script src='https://use.edgefonts.net/amaranth.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

</body>
</html>

一切正常，但我无法记录对控制台的任何响应。事实上，我没有得到任何回应。请帮忙。我卡住了。

Answer 1

每次提交表单时页面都会重新加载，这就是为什么您没有收到任何结果的原因。

generatedId

阻止它使用preventDefault（）重新加载，你应该很好。

我没有收到Google Books API的回复？

1 个答案: