Не могу получить форму WordPress Ajax для отправки

Question

Я портирую приложение на WordPress. Он использует форму для выбора атрибутов, которые клиент ищет в доме для взрослых с помощью флажков и раскрывающихся списков. Это повторно ищет базу данных на каждом onchange и keyup. Первоначально у меня было автономное приложение на PHP, но когда я переместил его на WordPress, у меня начались проблемы.

В настоящее время в WP у меня есть условный код ($ DavesWay == 1), чтобы сделать ajax обычным без-WordPress-способом и ($ DavesWay == 0), чтобы сделать это WordPress-путем.

В не-WordPress-способе, ajax работает нормально, за исключением того, что я получаю заголовок и меню WP между формой поиска и div-файлом результатов, в который Ajax помещает данные. Я не получаю ошибок ни от 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 рекомендует его в своей документации :

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

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