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>

// result.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'])) {
...

Answer 2

我建议在这种情况下，你只需创建一个隐藏字段，其值如下：

<input type="hidden" name="search" value="submitted" />

那将在提交中出现。

在用户提交表单而不刷新页面后显示数据（从API调用中检索）

2 个答案: