如何从同一页面上的 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)">&nbsp; &nbsp; <input type="hidden" name="sites" value="" />&nbsp; &nbsp; <input type="hidden" name="k7" value="#ffffff" />&nbsp; &nbsp; <input type="hidden" name="k8" value="#222222" />&nbsp; &nbsp; <input type="hidden" name="k9" value="#00278e" />&nbsp; &nbsp; <input type="hidden" name="kx" value="#20692b" />&nbsp; &nbsp; <input type="hidden" name="kj" value="#fafafa" />&nbsp; &nbsp; <input type="hidden" name="kt" value="p" />&nbsp; &nbsp; <input type="text" name="q" placeholder="INFO" aria-label="Search" />&nbsp; &nbsp; <button type="submit">Search</button></form><script src="https://code.jquery.com/jquery-3.4.1.js"&nbsp; &nbsp; integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script><script>&nbsp; &nbsp; function onsubmitForm(e) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var url = "https://api.hackertarget.com/aslookup?q="+$("input[name='q']").val();&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "GET",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script>