wordpress 中的依赖下拉列表

Question

我正在尝试使用自定义代码在 WordPress 中创建成本估算表单，并且我是 PHP、AJAX 和 MYSQL 的初学者，因此我需要以下查询的帮助。

基本上需要为汽车品牌和汽车型号创建一个依赖下拉列表，所以我创建了一个 dab 表调用wp_cost_estimation，其中包含id、make、make_id、model。见下图。

因此，如果用户在下一个下拉菜单中选择讴歌，它应该不会重复显示所有讴歌车型。 我尝试了下面的代码。 请纠正我的错误。

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>  

请帮帮我。

Answer 1

如果您使用的是 WordPress，那么您肯定想彻底阅读 AJAX in Plugins 和 J.A.jQ Codex，如果您没有真正使用 WordPress 的任何好处您现有的代码。

您想在这里利用的两个最大的东西是wp_ajax_{$action}() hook 和$wpdb 类。

wp_ajax_（和wp_ajax_nopriv_）挂钩允许您轻松运行具有特定操作的函数，$wpdb 类处理绝大多数（阅读：全部）数据库连接以及您需要的互动。您可以将几乎所有这些内容放到您的 functions.php 文件（或插件文件，或 Must Use Plugin 文件）中

我冒昧地在这里设置了一个工作示例：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 文件排入队列，localizes it with wp_localize_script() 将适当的 AJAX URL 传递给它（这也是您可以将其他数据从 PHP 传递到 JS 处理程序的方式）。

最后一部分使用wp_ajax_钩子运行load_models函数，并使用$wpdb的辅助函数准备语句，wp_send_json将其转换为JSON，打印出来，然后死。 （在通过 AJAX 运行函数后，通过 DIE/EXIT 终止请求非常重要。如果您 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()，如果使用wp_enqueue_script() 的$in_footer 选项，您还需要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/，它使用以下数据库结构：