javascript - 用户提交表单后显示数据(从 API 调用检索)而不刷新页面

Question

我正在创建一个表单，它将在提交时从用户那里获取搜索查询请求，并在进行 API 调用后显示结果。我想在不使用 AJAX 刷新页面的情况下显示结果。我正在使用 PHP 连接到 API。

这是我到目前为止所拥有的，但我无法显示结果。无论API连接是否成功，如果不刷新页面，我什至无法获取同一页面中显示的表单条目，因此我不确定我是否做得正确。我缺少什么？为了使这项工作顺利进行，我还需要考虑什么？有人可以引导我走向正确的方向吗？

$(document).ready(function() {

      $('#search-form').on('submit', (function(e) {

          e.preventDefault();

          $.ajax({

            url: $(this).attr('action'),
            type: $(this).attr('method'),
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data) {

              console.log(data);

              $('#results').html(data);
            }
          });

        });

      });

<form action='result.php' method='post' id='search-form'>
  <input type='search' name='search'>
  <input type='submit' value='submit'>
</form>

<div id='results'>Result comes here..</div>

//结果.php

if(isset($_POST['search'])) {
    $query = urlencode( $_POST[ "search"]);
    $request = 'http://some.api/?query=' . $query;
    $response=file_get_contents($request); 
    $result=json_decode($response); 

    echo ($result);
} else {
    echo ("No search query has received");
}

Answer 1

.serialize() 不会序列化提交按钮。提交按钮仅在按下/触发其所在表单上的提交操作时才会在请求中发送，.serialize() 无法知道这些。
您只需手动添加该信息或根本不检查它。

...
data: $(this).serialize()='&submit=ajax',
...

或

if(!empty($_POST['search'])) {
...