Я пытаюсь создать простое веб-приложение, которое может искать сведения о книгах с помощью API Google Книг. Код кажется нормальным, но я не понимаю, что мне не хватает? Вот код для справки: -

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

Все работает нормально, за исключением того, что я не могу зарегистрировать ответ на консоль. На самом деле я не получаю никакого ответа. Пожалуйста помоги. Я застрял.

0
Priytosh Tripathi 18 Фев 2018 в 10:34

1 ответ

Лучший ответ

Страница перезагружается каждый раз, когда вы отправляете форму, поэтому вы не получаете никаких результатов.

$("#myform").submit(function(e){
  e.preventDefault()

Остановите его перезагрузку с помощью preventDefault (), и все будет хорошо.

1
olan 18 Фев 2018 в 12:51