Как получить результаты из моей формы html на той же странице?

Question

У меня есть окно поиска для запроса информации от API.

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

это то, что я имею до сих пор.

<form
  method="get"
  id="Search"
  action="https://api.hackertarget.com/aslookup/?q="
  ONSUBMIT="submit(); return false;"
>
  <input type="hidden" name="sites" value="" />
  <input type="hidden" name="k7" value="#ffffff" />
  <input type="hidden" name="k8" value="#222222" />
  <input type="hidden" name="k9" value="#00278e" />
  <input type="hidden" name="kx" value="#20692b" />
  <input type="hidden" name="kj" value="#fafafa" />
  <input type="hidden" name="kt" value="p" />
  <input type="text" name="q" placeholder="INFO" aria-label="Search" />
  <button type="submit">Search</button>
</form>

Answer 1

<form onsubmit="onsubmitForm(event)">
    <input type="hidden" name="sites" value="" />
    <input type="hidden" name="k7" value="#ffffff" />
    <input type="hidden" name="k8" value="#222222" />
    <input type="hidden" name="k9" value="#00278e" />
    <input type="hidden" name="kx" value="#20692b" />
    <input type="hidden" name="kj" value="#fafafa" />
    <input type="hidden" name="kt" value="p" />
    <input type="text" name="q" placeholder="INFO" aria-label="Search" />
    <button type="submit">Search</button>
</form>

<script src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<script>
    function onsubmitForm(e) {
        e.preventDefault(); 
        var url = "https://api.hackertarget.com/aslookup?q="+$("input[name='q']").val();
        $.ajax({
            url: url,
            method: "GET",
            success: function (result) {
                console.log(result);
            }
        });
    }


</script>

Answer 2

Вам необходимо использовать AJAX звонков. В этом примере кода я использовал метод jQuery.ajax. Вы также можете использовать API браузера fetch или XMLHttpRequest API.

$(function() {
  $('#Search').on('submit', function() {
    event.preventDefault();
    var url = 'https://api.hackertarget.com/aslookup/';
    var data = $('#Search').serialize();

    $.ajax(url + '?' + data).then(function(data) {
      $('.output').text(data);
    });
  });
});

  
  
  
  
  
  
  
  
  Search