javascript - 多场景表单 Action (后台、多 Action 、定时器)

Question

我已经尝试使用可能适用于 AJAX、Javascript、JQuery 和 PHP，但我还没有找到一种方法来为我的场景获得正确的结果。

我有一个搜索框文本输入字段:

<input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>

在三种情况下需要执行不同的操作:

1. 在页面加载时，将输入发送到 search-api.php作为POST在后台每 5 秒，从操作中获取结果并将响应设置为 $url . (不仅必须显示首次提交的响应，还必须显示每 5 秒更新一次的所有输入更改的响应)。

2. 按下输入按钮时，将输入发送为 GET给 https://externalaction.com/search 在前台。

3. 当按钮<input class="button default" name="BtnX" type="submit" value="Search">按下，将输入发送为 GET给 https://externalaction.com/search 在前台。

我知道这很复杂，但我还没有找到一种适用于所有三种情况且互不干扰的解决方案，而且网上似乎没有人有任何信息或问题与这种情况非常相似。

感谢任何提供帮助、提示或答案/代码的人!

Answer 1

这看起来并不太复杂，但我不确定为什么您希望每 5 秒而不是按键时发送一次搜索查询？无论如何，它应该只使用 $.post()和 setTimeout .

<form action="https://externalaction.com/search" method="get">
    <input id="field" name="q" maxlength="2048" autocomplete="off" title="Search" type="text" value="" spellcheck="false" autofocus>
    <input class="button default" name="BtnX" type="submit" value="Search">
</form>
<div id="results"></div>

<script>
$(function() {
    search();
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );

    setTimeout(search, 5000);
}
</script>

如果您有兴趣使用按键而不是每 5 秒一次，对于 JS 来说就像这样:

<script>
$(function() {
    $('#field').on('keyup change', 'search');
});
function search() {
    $.post(
        "search-api.php",
        { field: $('#field').val() },
        function (data) {
            $('#results').html(data); // or whatever format you want data in
        }
    );
}
</script>

虽然在这种情况下您不需要命名函数，但您可以将 search() 函数设置为按键回调。

您还提到想要将 AJAX 响应设置为 $url，但是它看起来像一个 PHP 变量，所以如果它是在带有表单的页面中，除非您重新加载它。如果您想以编程方式进行重定向，这很容易做到，但会变得非常棘手并进入奇怪的循环。所以最好知道 $url 在页面中被用于什么，然后使用 JS 将其替换为回调中的值，就像我替换结果的 HTML 一样div 在我当前的示例中。

搜索表单字段将在“输入”键按下时自动提交，只要它有焦点(即在有人完成输入并点击“输入”之后)，但是如果您想要在按下输入时发送结果，则无论如何其中输入有焦点 this answer会有帮助。

顺便说一句，通常您不希望在没有某种清除超时的结束条件的情况下使用超时进行递归搜索，因为在某些情况下这会导致内存问题。