WordPress自定义表数据无法通过jQuery在HTML下拉框显示

我尝试用jQuery和Ajax把WordPress自定义表的客户信息显示在HTML下拉选择框里，写了两种jQuery代码，但既不报错也没任何结果，帮忙检查代码问题。

jQuery 代码 #

jQuery(document).ready(function() {
          
    jQuery.ajax({
        url: ajax_url, 
        type: 'GET',
        dataType: 'json',
        cache: false,
        data: {
            action: 'customer_list_show' 
        },
        // 第一种写法（被注释）
        /*success: function(data) {
           console.log('2eee');
          jQuery.each(data, function(index, item) {
            var custlist = jQuery("<option>").val(item.id).text(item.firstname);
            jQuery("#itr_customer").append(custlist);
            console.log('222');
             
          });
        },*/

        // 当前使用的第二种写法
        success: function(response) {
           console.log('111');
          var data = JSON.parse(response);
          jQuery.each(data, function(key, value) {
            jQuery('#itr_customer').html('<option value="' + value.id + '">' + value.firstname + '</option>');
            console.log('222');
          });
        },

        /*error: function(jqXHR, textStatus, errorThrown) {
          console.error(errorThrown);
        }*/
        error: function(xhr, status, error) {
            console.log(error);
        }
    }); 

});  

PHP 代码 #

public function customer_list_show() {
    global $wpdb; 
    $results = $wpdb->get_results("SELECT * FROM wp_customer_info");
    //echo wp_send_json($results);
    echo wp_json_encode($results);
    wp_die();  
}

问题分析与修正方案 #

1. 前端核心问题 #

• ajax_url未定义：WordPress前端无法直接使用ajax_url，必须通过wp_localize_script将后台的AJAX地址传递到前端。比如在注册脚本时添加：

  wp_enqueue_script('your-script-handle', get_template_directory_uri() . '/js/your-script.js', array('jquery'), '1.0', true);
  wp_localize_script('your-script-handle', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
  

  前端要改成url: ajax_object.ajax_url才能正确发起请求。

• 第二种success函数的错误：

  • 已经设置dataType: 'json'，jQuery会自动将响应解析为JSON对象，再用JSON.parse(response)会触发解析错误（控制台能看到，但你注释了部分错误日志可能没发现）。
  • 循环中用.html()会每次覆盖下拉框的所有内容，最终只会显示最后一个客户，应该用.append()追加选项。

2. PHP核心问题 #

• AJAX动作未注册：你的customer_list_show方法必须通过WordPress的AJAX钩子注册，否则后台无法识别这个动作：

  // 登录用户可用
  add_action('wp_ajax_customer_list_show', [$this, 'customer_list_show']);
  // 未登录用户可用（如果需要的话）
  add_action('wp_ajax_nopriv_customer_list_show', [$this, 'customer_list_show']);
  

• 硬编码表前缀：直接写wp_customer_info适配性差，应该用$wpdb->prefix动态获取表前缀：

  $table_name = $wpdb->prefix . 'customer_info';
  $results = $wpdb->get_results("SELECT * FROM $table_name");
  

• 响应输出不规范：推荐用wp_send_json($results)代替echo wp_json_encode($results); wp_die();，它会自动设置正确的Content-Type响应头，并且自动终止脚本，更符合WordPress规范。

修正后的完整代码 #

前端jQuery

jQuery(document).ready(function() {
    jQuery.ajax({
        url: ajax_object.ajax_url, 
        type: 'GET',
        dataType: 'json',
        cache: false,
        data: {
            action: 'customer_list_show' 
        },
        success: function(data) {
            // 清空原有选项（可选）
            jQuery('#itr_customer').empty();
            // 追加默认选项
            jQuery('#itr_customer').append('<option value="">请选择客户</option>');
            jQuery.each(data, function(index, item) {
                var custOption = jQuery("<option>").val(item.id).text(item.firstname);
                jQuery("#itr_customer").append(custOption);
            });
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求错误:', error);
        }
    }); 
});  

PHP代码

// 注册AJAX动作（在类的构造函数或初始化钩子中添加）
public function __construct() {
    add_action('wp_ajax_customer_list_show', [$this, 'customer_list_show']);
    add_action('wp_ajax_nopriv_customer_list_show', [$this, 'customer_list_show']);
}

public function customer_list_show() {
    global $wpdb; 
    $table_name = $wpdb->prefix . 'customer_info';
    $results = $wpdb->get_results("SELECT id, firstname FROM $table_name");
    wp_send_json($results);
    // wp_send_json会自动调用wp_die()，不需要手动写
}

内容的提问来源于stack exchange，提问作者Rashed khan