WordPress中的AJAX表單提交無法正常工作（繼續…）

Question

這是我這里問題的延續。 我有帶有2個下拉菜單和1個輸入提交表單的自定義頁面模板。 當用戶提交表單時，將顯示結果，這工作正常。 但是我有一個問題，在獲取數據庫中的數據時瀏覽器會重新加載。

我正在嘗試使用AJAX來防止刷新瀏覽器。 我剛剛更新了functions.php和JS中的AJAX函數。 用戶單擊“提交”按鈕時，頁面現在沒有刷新。 但是不顯示結果。 我正在使用is_page ，以在特定頁面中顯示不同的結果

如何解決這個問題？ 如何在AJAX中調用自定義PHP文件？

AJAX（functions.php）

function ajax_enqueue_sl(){
    wp_enqueue_script('ajax_load_sl', get_template_directory_uri().'/js/alternate-dropdown.js', array('jquery'));
    wp_localize_script('ajax_load_sl', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php')));
}
    add_action('wp_enqueue_scripts', ajax_enqueue_sl);

add_action('init', 'registerFormAction');
function registerFormAction(){
    // To handle the form data we will have to register ajax action. 
    add_action('wp_ajax_nopriv_submitAjaxForm','submitAjaxForm_callback');
    add_action('wp_ajax_submitAjaxForm','submitAjaxForm_callback');
}

function submitAjaxForm_callback(){
    global $wpdb;
    if(is_page(9208)){
        //ROCK ON!
        if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
        $store_list = $_POST['store_list'];
        $stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND col IN ('test') ORDER BY street ASC", OBJECT));
        foreach ($stores as $record_s){
            echo '<div class="records">';
            echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_s->street . '</span></div>';
            echo '</div>';
        }
    } elseif (isset($_POST['mall_list']) && $_POST['mall_list'] != 'Select by Mall'){
        $mall_list = $_POST['mall_list'];
        $street = $wpdb->get_results($wpdb->prepare("SELECT stores FROM tablename WHERE street= '" . $street_list . "' AND col IN ('test') ORDER BY stores ASC", OBJECT));
        foreach ($street as $record_m){
            echo '<div class="records">';
            echo '<div><span class="icons-tabbed-store icon-icon-stores">' . $record_m->stores . '</span></div>';
            echo '</div>';
        }
    }
    }
    wp_die();
}

帶HTML的PHP​​（test.php）

$results_street = $wpdb->get_results('SELECT DISTINCT street FROM tablename WHERE code IN ("test1") ORDER BY street ASC', OBJECT);
$results_stores = $wpdb->get_results('SELECT DISTINCT stores FROM tablename WHERE code IN ("test2") ORDER BY stores ASC', OBJECT);

<form action='' method='post' name='myform' id="myform">
<div class="pos-div">
<select name="street_list" id="filterbystreet">
    <option name="default" class="filter_by" value="Select by">Select by</option>
    <?php
    foreach($results_street as $option){
        if(isset($_POST['street_list']) && $_POST['street_list'] == $option->street)
            echo '<option name="street_list" class="filter_by" selected value="'. $option->street .'">'. $option->street .'</option>';
        else    
         echo '<option name="street_list" class="filter_by" value="'. $option->street .'">'. $option->street .'</option>';
     };
    ?>
</select>
</div>
<span class="or">or</span>
<div class="pos-div">
<select name="store_list" id="filterby">
    <option name="default" class="filter_by" value="Select by">Select by</option>
    <?php 
    foreach($results_stores as $option){
        if(isset($_POST['store_list']) && $_POST['store_list'] == $option->stores)
            echo '<option name="store_list" class="filter_by" selected value="'. $option->stores .'">'. $option->stores .'</option>';
        else    
         echo '<option name="store_list" class="filter_by" value="'. $option->stores .'">'. $option->stores .'</option>';
     };
    ?>
</select>
</div>
<input type="submit" value="List all partner stores" class="pos-submit"/>
</form>

if (isset($_POST['store_list']) && $_POST['store_list'] != 'Select by Store'){
        $store_list = $_POST['store_list'];
        $stores= $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE stores= '" . $store_list . "' AND code IN ('test3') ORDER BY street ASC", OBJECT));
        foreach ($stores as $record_s){
            echo '<div class="records">';
            echo '<div><span>' . $record_s->street. '</span></div>';
            echo '</div>';
        }
    } elseif (isset($_POST['street_list']) && $_POST['street_list'] != 'Select by'){
    $street_list = $_POST['street_list'];
    $streets = $wpdb->get_results($wpdb->prepare("SELECT street FROM tablename WHERE street_list= '" . $street_list. "' AND code IN ('test3') ORDER BY stores ASC", OBJECT));
    foreach ($streets as $record_m){
        echo '<div class="records">';
        echo '<div><span>' . $record_m->stores . '</span></div>';
        echo '</div>';
    }
}

ajax_js.js

    jQuery(document).ready(function($){
    //$('#myform').submit(ajaxFormSubmit);

    $('#filterbystreet').change(function(){
        $('#filterbystore').prop('selectedIndex','Select by Store');
    });

    $('#filterbystore').change(function(){
        $('#filterbystreet').prop('selectedIndex','Select by');
    });

    jQuery('.pos-submit').on('click',function(e){ 
        e.preventDefault(); 
        var myform = jQuery('#myform').serialize(); 

        jQuery.ajax({ 
            type:"POST", 
            // Get the admin ajax url which we have passed through wp_localize_script(). 
            url: ajax_object.ajax_url, 
            action: "submitAjaxForm", 
            data: myform, 
            success:function(data){ 
                jQuery(".records").html(data); 
                console.log(data);
            } 
        }); 
    });
});

Answer 1

首先，首先使用wp_enqueue_scripts函數和wp_localize_script注冊，然后將句柄放入函數中，如法典中的示例

  // Register the script
  wp_register_script( 'ajax_load_sl', get_template_directory_uri().'/js/alternate-dropdown.js', array('jquery'));

  wp_localize_script('ajax_load_sl', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php'))););

  // Enqueued script with localized data.
  wp_enqueue_script( 'ajax_load_sl');

詳細信息和示例在這里

在您的php腳本中，您沒有提到它是否位於函數中（我認為是這樣，並假設這樣做），在函數頂部，您需要添加

global $wpdb;

然后你可以使用$wpdb

表名永遠不會被識別，您需要將wp_posts放在其中wp_是表前綴的地方，或者$wpdb->prefix.'posts'如果您不想考慮前綴的話。

global $wpdb;

$results_street = $wpdb->get_results('SELECT DISTINCT street FROM wp_posts WHERE code IN ("test1") ORDER BY street ASC', OBJECT);
$results_stores = $wpdb->get_results('SELECT DISTINCT stores FROM wp_posts WHERE code IN ("test2") ORDER BY stores ASC', OBJECT);

用正確的數據庫名稱更改wp_posts。

告訴我以后是否可行！