Я хочу найти данные из API и показать его результат

Question

HTML-код, строка передается в q, теперь я не знаю, как получить данные на моем внешнем интерфейсе.

 <div class="ui search">
   <form class="example" action="/dashboard" method="get">
<input type="text" placeholder="Enter The Book Name to Search" class="prompt" name="q">
    <button type="submit"><i class="fa fa-search"></i></button>
</form>
    <div class="results"></div>
</div>

Как написать тэг scipt, как получить данные из API помогите пожалуйста ребята

ссылка: https://openlibrary.org/search?q={query строка}

<script>

$('.ui.search')
    .search({
        apiSettings: {
            url: 'https://openlibrary.org/search?q={query}'
        },
        fields: {
            results : 'items',
            title   : 'name',
            url     : 'html_url'
        },
        minCharacters : 3
    })
;

Answer 1

Убедитесь, что вы применяете css согласно вашей воле, это будет работать для извлечения данных

<div id="multiple-datasets">
            <form class="example" action="#">
        <input class="typeahead" type="text" placeholder="Enter The Book Name to Search" name="search">
            </form>
        </div>

вставьте это в тег скрипта

<script>
var books = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://openlibrary.org/search.json?title=%QUERY',
        wildcard: '%QUERY',
        filter: function (searchResults) {
            return $.map(searchResults.docs, function (searchResults) {
              //  console.log(searchResults.author_name);
               // console.log("key is "+searchResults.key)
                if (JSON.parse(sessionStorage.getItem("selectedBooks") == undefined || JSON.parse(sessionStorage.getItem("selectedBooks").indexOf(searchResults.title)) == -1)){
                    return {
                        title: searchResults.title,
                        key: searchResults.key,
                    };
                }
            });
        }
    }
});
var authorsList = [];
var authors = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://openlibrary.org/search.json?author=%QUERY',
        wildcard: '%QUERY',
        filter: function (searchResults) {
            return $.map(searchResults.docs, function (searchResults) {
                if (searchResults.author_name !== undefined){
                    var author = searchResults.author_name.toString();
                }
                if (authorsList.indexOf(author) == -1) {
                    authorsList.push(author);
                    return {
                        author_key: searchResults.author_key,
                        author: author,
                    };
                }
            });
        },
    }
});
$('#multiple-datasets .typeahead').typeahead({
        highlight: true
    },
    {
        name: 'books',
        display: 'title',
        source: books,
        templates: {
            header: '<h3 class="search">Books</h3>'
        }
    },
    {
        name: 'authors',
        display: 'author',
        source: authors,
        templates: {
            header: '<h3 class="search">Authors</h3>'
        }
    });

$('#multiple-datasets').bind('typeahead:selected', function(obj, datum, name) {
    if (name == 'books'){
        var selectedBooks = JSON.parse(sessionStorage.getItem("selectedBooks"));
        if (selectedBooks == null){
            var a = [];
            a.push(datum.title);
            sessionStorage.setItem("selectedBooks", JSON.stringify(a));
        }else{
            selectedBooks.push(datum.title);
            sessionStorage.setItem("selectedBooks", JSON.stringify(selectedBooks));
        }

    }else if (name == 'authors'){

        var selectedAuthors = JSON.parse(sessionStorage.getItem("selectedAuthors"));
        if (selectedAuthors == null){
            var a = [];
            a.push(datum.author);
            sessionStorage.setItem("selectedAuthors", JSON.stringify(a));
        }else{
            selectedAuthors.push(datum.author);
            sessionStorage.setItem("selectedAuthors", JSON.stringify(selectedAuthors));
        }
    }
    $('.typeahead').typeahead('val','');
    update_lists(JSON.parse(sessionStorage.getItem("selectedAuthors")),JSON.parse(sessionStorage.getItem("selectedBooks")));
});

update_lists(JSON.parse(sessionStorage.getItem("selectedAuthors")),JSON.parse(sessionStorage.getItem("selectedBooks")));



function update_lists(Authors,Books) {
    $('#authorlist li').remove();
    $('#booklist li').remove();
    $.each(Authors, function(index,name) {
       // console.log("Its author data"+authors.name);
        $('#authorlist').append('<li><a href="#" >'+name+'</a></li>')
    });
    $.each(Books, function(index,name) {
        console.log("Book Data"+books);
        $('#booklist').append('<li><a href="#" >'+name+'</a></li>')
    });
}

Answer 2

Вы не сможете сделать это, используя только HTML-код. Когда вы отправляете форму, входные данные формы отправляются на сервер, и страница обновляется. В этом случае вы не можете обработать ответ сервера.

Если вы действительно хотели получить ответ в Javascript (без обновления страницы), вам нужно будет использовать AJAX, а когда вы начнете говорить об использовании AJAX, вам нужно будет использовать библиотеку. jQuery - безусловно самая популярная библиотека. Есть плагин для jQuery под названием Форма , который будет делать именно то, что звучит так, как вы хотите.

Пример:

// wait for the DOM to be loaded 
$(document).ready(function () {
    console.log("Thank you for your 1!");
    // bind 'myForm' and provide a simple callback function 
    // attach handler to form's submit event 
        $('#myForm')
      .ajaxForm({
          url : $('#myForm').attr('action'), // or whatever
          dataType : 'json',
          success : function (response) {
              alert("The server says: " + JSON.stringify(response));
          }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<form id="myForm" action="https://httpbin.org/get" method="get"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>