我是WordPress的新手，但已经编写PHP很长时间了。。。我找了一大堆问题，但找不到我需要的。

我有一个带有搜索表单的页面，其中包含一些参数和一个提交按钮。

我有一个javascript，它使用AJAX将表单参数提交到非WordPress服务器上的REST API端点。当我从该服务器返回响应时，我希望在页面上显示结果。

以下是我粘贴到页面上的表单数据：

<form id="grpSearch">
        <div class="form-group">
            <label for="days[]"
                   style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Day: </label>
            <input type="checkbox" name="days[]" value="1"> Su &nbsp;
            <input type="checkbox" name="days[]" value="2"> M &nbsp;
            <input type="checkbox" name="days[]" value="3"> T &nbsp;
            <input type="checkbox" name="days[]" value="4"> W &nbsp;
            <input type="checkbox" name="days[]" value="5"> Th &nbsp;
            <input type="checkbox" name="days[]" value="6"> F &nbsp;
            <input type="checkbox" name="days[]" value="7"> Sa &nbsp;
        </div>
        <div class="form-group">
            <label for="tod[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Time of
                Day: </label>
            <input type="checkbox" name="tod[]" value="8"> Morning &nbsp;
            <input type="checkbox" name="tod[]" value="9"> Afternoon &nbsp;
            <input type="checkbox" name="tod[]" value="10"> Evening &nbsp;
        </div>
        <div class="form-group">
            <label for="frequency[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Frequency: </label>
            <input type="checkbox" name="frequency[]" value="11"> Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="12"> Bi-Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="13"> Monthly &nbsp;
            <input type="checkbox" name="frequency[]" value="14"> Occasional &nbsp;
        </div>
        <div class="form-group">
            <input name="search" type="submit" class="button" value="Search"/>
        </div>
</form>

<div id="results"></div>

以下是单击submit按钮时应调用的JavaScript。

(function ($) {
function processForm(e) {
    $.ajax({
        url: \'https://example.com/groups\',
        dataType: \'text\',
        method: \'get\',
        contentType: \'application/x-www-form-urlencoded\',
        data: $(this).serialize(),
        success: function (data, textStatus, jQxhr) {
            makeHtml(jQuery.parseJSON(data));
            $(\'#grpSearch\')[0].reset();
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    e.preventDefault();
}

function makeHtml(data) {
    $(\'#results\').empty();
    for (var index in data) {

        // Start the result div for a single group
        var result = \'<div class="result clearfix" style="padding-top: 15px;">\';

        // Add the contact div
        result += makeContactDiv(group);

        // Add the content div
        result += makeContentDiv(group);

        result += \'</div>\';

        $(\'#results\').append(result);
    }
} 
})(jQuery);

当这些代码都在一个普通的html页面上（而不是在WordPress中）时，它工作得非常好。我现在需要将该功能移动到WP中的一个页面中。我认为将HTML放入页面、将javascript文件添加到页眉中会非常容易，这样就可以正常工作了。遗憾的是，事实并非如此。

那么，我如何单击Search按钮调用JavaScript代码，通过在WordPress上我的页面的results div中添加内容来获取结果并更新页面？

如果有其他方法需要这样做，请教育我。

public function display_group_information($content)
{
    global $post;

    if ($post->post_name == \'groups-activities-and-events\'){
        add_action(\'wp_footer\', [$this, \'load_group_ajax\']);
    }
    return $content;
}

public function load_group_ajax(){
?>
    <script>
        !function(r){function n(n).....("#grpSearch").submit(n)}(jQuery);
    </script>

<?php
}