Блог

Я пытаюсь создать форму оценки затрат в WordPress, используя пользовательский код, и я новичок в PHP, AJAX и MYSQL, поэтому мне нужна помощь в приведенном ниже запросе.

В основном нужно создать зависимый выпадающий список для марки автомобиля и модели автомобиля, поэтому я создал один вызов таблицы dab wp_cost_estimation , который имеет id , make , make_id , model . Смотрите Изображение ниже.

Поэтому, если пользователь выбирает Acura в следующем выпадающем списке, он должен показывать все модели Acura без повторения. Я попробовал приведенный ниже код. Пожалуйста, поправьте меня, где я ошибаюсь.

cost_estimation_template.php

  <select placeholder="Select Make" name="make" id="make">
              <option disabled="" selected="">--Select Make--</option>
              <?php

                    include get_theme_file_path( '/data.php' );
                    $makes = loadMake();

                    foreach ($makes as $make) {
                                    echo "<option id='".$make['id']."' value='".$make['id']."'>".$make['make']."</option>";
                                }
              ?>
            </select>

  <select placeholder="Select Model" name="model" id="model">
              <option disabled="" selected="">--Select Model--</option>

            </select>
 

data.php

  if(isset($_POST['aid'])) {
    $db = new DbConnect;
    $conn = $db->connect();
    $stmt = $conn->prepare("SELECT model_name FROM wp_cost_estimation WHERE make_id = " . $_POST['aid'] GROUP BY model_name);
    $stmt->execute();
    $models = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($models);
}

 
  function loadMake() {
    $db = new DbConnect;
    $conn = $db->connect();

    $stmt = $conn->prepare("SELECT MIN(id) AS id, make FROM wp_cost_estimation GROUP BY make");
    $stmt->execute();
    $make = $stmt->fetchAll(PDO::FETCH_ASSOC);
    return $make;
}
 

Код AJAX:

 <script type="text/javascript">
    $(document).ready(function(){
        $("#make").change(function(){
            var aid = $("#make").val();
            $.ajax({
                url: '<?php echo get_theme_file_path('/data.php'); ?>',
                method: 'post',
                data: 'aid='   aid
            }).done(function(model){
                console.log(model);
                model = JSON.parse(model);
                $('#model').empty();
                model.forEach(function(models){
                $('#model').append('<option>'   models.model_name   '</option>')
                })
            })
        })
    })
</script>  
 

Пожалуйста, помогите мне.

Если вы используете WordPress, вам обязательно нужно внимательно прочитать AJAX в плагинах и JA jQ Codex, вы на самом деле не используете ни одно из преимуществ WordPress, если ваш существующий код.

Две самые важные вещи, которые вы хотели бы использовать здесь, — это wp_ajax_{$action}() хук и $wpdb класс.

Хуки wp_ajax_ (и wp_ajax_nopriv_ ) позволяют вам легко запускать функции с определенными действиями, а $wpdb класс обрабатывает подавляющее большинство (читай: все) соединений и взаимодействий с базой данных, которые вам понадобятся. И вы можете удалить почти все это в свой functions.php файл (или файл плагина, или необходимо использовать файл плагина)

Я взял на себя смелость создать рабочий пример здесь: https://xhynk.com/content-mask/65517584-answer /

Вот как functions.php выглядит файл:

 function loadMake(){
    global $wpdb;
    return $wpdb->get_results( "SELECT MIN(id) AS id, make FROM cm_test_make_model GROUP BY make" );
}

add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_script( '65517584', get_stylesheet_directory_uri() . '/assets/scripts/65517584.js', [], filemtime(get_stylesheet_directory() . '/assets/scripts/65517584.js'), true );

    $localize = array( 'ajax_url' => admin_url( 'admin-ajax.php' ) );
    wp_localize_script( '65517584', 'ajax_object', $localize );
});

add_action( 'wp_ajax_load_models', 'load_models' );
add_action( 'wp_ajax_nopriv_load_models', 'load_models' );
function load_models(){
    if( isset($_POST['aid']) ){
        global $wpdb;
        
        $sql = "SELECT model_name FROM cm_test_make_model WHERE make_id = %d GROUP BY model_name";
        $results = $wpdb->get_results( $wpdb->prepare( $sql, array( absint($_POST['aid']) ) ) );

        wp_send_json( $results, 200 );
    } else {
        wp_send_json( array('message', 'aid is required'), 400 );
    }
}
 

Вы заметите loadMake() , что функция используется $wpdb для создания простого запроса (я также изменил имя таблицы, чтобы оно соответствовало моему)

Он также помещает файл JavaScript в очередь и локализует его, wp_localize_script() чтобы передать ему соответствующий URL-адрес AJAX (таким же образом вы можете передавать другие данные из PHP в ваш обработчик JS).

Последняя часть использует wp_ajax_ перехваты для запуска load_models функции и использует $wpdb вспомогательные функции для подготовки инструкции и wp_send_json преобразования ее в JSON, распечатки и последующего завершения. (ОЧЕНЬ ВАЖНО ЗАВЕРШИТЬ ЗАПРОС С ПОМОЩЬЮ DIE / EXIT ПОСЛЕ ЗАПУСКА ФУНКЦИИ ЧЕРЕЗ AJAX. Если вы echo выводите json вручную, вам нужно будет вызвать die или exit после.)

Ниже приведен файл JavaScript, поставленный в очередь (обратите внимание, я поставил его в очередь относительно моей темы, возможно, вам потребуется изменить URL-адрес, указанный в очереди выше, если ваш находится в другом месте:

 jQuery(document).ready(function($){
    $("#make").change(function(){
        var aid = $("#make").val();
        $.ajax({
            url: ajax_object.ajax_url   '?action=load_models',
            method: 'post',
            data: 'aid='   aid
        }).done(function(models){
            $('#model').empty();
            models.forEach(function(model){
                console.log( model );
                $('#model').append('<option>'   model.model_name   '</option>');
            });
        });
    });
});
 

Вы можете видеть, что URL использует локализованную переменную, которую мы передали.

Наконец, я создал простой шаблон страницы, в котором есть выбор. Обратите внимание, что wp_enqueue_scripts требуется wp_head() на странице, и если вы используете $in_footer опцию wp_enqueue_script() , вам wp_footer() также понадобится:

 <?php wp_head(); ?>
<select placeholder="Select Make" name="make" id="make">
    <option disabled="" selected="">--Select Make--</option>
    <?php
        $makes = loadMake();
        foreach( $makes as $make ){
            printf( '<option id="%d" value="%d">%s</option>', $make->id, $make->id, $make->make );
        }
    ?>
</select>

<select placeholder="Select Model" name="model" id="model">
    <option disabled="" selected="">--Select Model--</option>
</select>
<?php wp_footer(); ?>
 

Немного многословно (извините!), Но вы действительно захотите использовать экосистему WordPress, если собираетесь ее использовать. И снова, вот ссылка на рабочий пример с использованием приведенного выше кода: https://xhynk.com/content-mask/65517584-answer / который использует следующую структуру базы данных: