如何从同一页面上的 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

您需要使用AJAX调用。我jQuery.ajax在此示例代码中使用了方法。您还可以使用浏览器的fetchAPI 或XMLHttpRequestAPI。

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

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="get" id="Search">

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

<pre class="output"></pre>

Answer 2

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