无法让 wordpress ajax 表单提交

Question

我正在将一个应用程序移植到 WordPress。它使用表单通过复选框和下拉菜单选择客户在成人家庭住宅中寻找的属性。它在每个 onchange 和 keyup 上重新搜索数据库。最初我在 PHP 中拥有独立的应用程序，但是当我将其迁移到 WordPress 时，我开始遇到问题。

目前在 WP 中，我对代码进行了条件化 ($DavesWay == 1) 以使用普通的非 WordPress 方式进行 ajax，并且 ($DavesWay == 0) 以 WordPress 方式进行。

在非 WordPress 方式中，ajax 可以正常工作，除了我在搜索表单和 Ajax 放入数据的结果 div 之间获得了 WP 标题和菜单。我没有收到来自 WP 或 JS 的错误安慰。在 WP-way 中显示了搜索表单，但是当我选中任何一个复选框时什么都没有发生。 JS控制台显示

POST http://localhost/demo4/wp-admin/admin-ajax.php 400（错误请求）

但我看不出有什么方法可以准确地说明它在抱怨什么。我应该如何解决这个问题？

疑难解答 = 检查 HTML 输出、PHP 代码中的大量回声和退出，查看 JS 控制台。

function submitPg1(theForm) {
        // Used with onChange from "most" form elements, but not on those that change the page
        // rather than the select criteria. Such as rowsPerPage, pageNumber etc.
        setById("pageNo", "1"); // set inital page
        mySubmit();
    }

    function mySubmit(theForm) { // The actual ajax submit
        // DO NOT set page number
            jQuery.ajax({ // create an AJAX call...
            data: jQuery("#asi_search_form").serialize(),       // get the form data
            type: jQuery("#asi_search_form").attr("method"),    // GET or POST
            url:  jQuery("#asi_search_form").attr("action"),    // the file to call
            success: function (response) {                      // on success..
                jQuery("#result").html(response);               // update the DIV
            }
        })
    }

    function setById(id, value) { // Used to set vales by Id
        x = document.getElementById(id).value;
        x.value = value;
    }

    // 1st submit with blank selection
    jQuery(document).ready(function () { submitPg1(this.form) });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Code fragments: (from the displayed page source)

<div id="asi_container" class="asi_container" >
        <noscript><h2>This site requires Javascript and cookies to function. See the Help page for how to enable them.</h2></noscript>
        <div id="searchForm">
            <form id="asi_search_form" name="asi_search_form" method="post"  action="http://localhost/demo4/wp-admin/admin-ajax.php"> 
                <input type="hidden" name="action" value="asi_LTCfetchAll_ajax" style="display: none; visibility: hidden; opacity: 0;">
                        <table id="greenTable" class="asi_table" title="The Green areas are for site administration, not typical users">
                        <tbody>

PHP code:

$DavesWay = 0; 
if ($DavesWay == 1){  //echo "Daves Way Setup"; // Dave's way, which works but prints the menu twice
    if( $operation == "submit"){ 
        require("asi_LTCfetchAll.php"); // for each onchange or onkeyup
    }else{
        add_filter( 'the_content', 'asi_tc_admin', '12' ); // Initial page refresh # must be >12
    }
}else{
    // The WordPress way that I could't get to work -- asi_LTCfetch never gets called 
    function asi_LTCfetchAll_ajax(){
        //echo "<br /> Goto to Submit function";   // DEBUG
        require($asi_plugin_dir . "/includes" . '/asi_LTCfetchAll.php');
    }

    add_action( "wp_ajax_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" );          // admin users
    add_action( "wp_ajax_nopriv_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" );   // non-logged in users
    add_filter( "the_content", "asi_tc_admin", "12" );                      // Initial page refresh # must be >12
}

Answer 1

尝试将 JavaScript 更改为 WordPress 在their documentation 中推荐的方式：

var data = {
    'action': 'my_action',
    'whatever': 1234
};

jQuery.post(ajaxurl, data, function(response) {
    alert('Got this from the server: ' + response);
});

Answer 2

我建议尝试以下网址：https://codex.wordpress.org/AJAX_in_Plugins

你也可以使用插件：https://wordpress.org/plugins/ajax-search-lite/