WordPress中Select2 Ajax调用函数及搜索参数传递问题

问题1：能否直接调用functions.php中的特定函数？ #

不行，不能直接通过Ajax请求functions.php来调用指定函数。原因有两点：

• WordPress的functions.php是主题/插件的初始化文件，直接访问不会触发你定义的函数，还可能泄露敏感配置信息。
• 这种写法不符合WordPress安全规范，容易引发权限或注入类安全问题。

正确实现方式是使用WordPress的自定义Ajax动作钩子，步骤如下：

1. 在functions.php中注册对应Ajax动作（区分登录/未登录用户）。
2. 让Ajax请求指向WordPress内置的admin-ajax.php文件，通过action参数指定要执行的函数。

问题2：如何传递搜索参数到服务端？ #

客户端已经通过data函数传递了searchTerm: params.term，但服务端需要正确接收参数，同时必须做好SQL注入防护，不能直接将参数拼入SQL语句。

修改后的服务端代码（functions.php） #

// 注册Select2样式与脚本
function enqueue_select2() {
    wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css');
    wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_select2');

// 注册Ajax动作：同时支持登录/未登录用户
add_action('wp_ajax_get_locations', 'get_locations_for_select2');
add_action('wp_ajax_nopriv_get_locations', 'get_locations_for_select2');

function get_locations_for_select2() {
    // 验证是否为合法Ajax请求
    if (!wp_doing_ajax()) {
        wp_die('非法请求');
    }

    // 获取并清洗客户端传递的搜索参数
    $searchTerm = isset($_POST['searchTerm']) ? sanitize_text_field($_POST['searchTerm']) : '';

    global $wpdb; // 使用WordPress内置数据库类，避免手动连接数据库

    // 用占位符拼接SQL，防止SQL注入
    $sql_loc = $wpdb->prepare(
        "SELECT t.term_id, t.name as term_name, slug 
         FROM {$wpdb->prefix}terms t 
         INNER JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_id = t.term_id 
         WHERE taxonomy = 'at_biz_dir-location' 
         AND slug LIKE '%-state' 
         AND t.name LIKE %s 
         ORDER BY t.name ASC LIMIT 20;",
        '%' . $wpdb->esc_like($searchTerm) . '%' // 转义特殊字符并添加通配符
    );

    $results = $wpdb->get_results($sql_loc, ARRAY_A);

    $data = [];
    if (!empty($results)) {
        foreach ($results as $row) {
            $data[] = array("id" => $row['term_id'], "text" => $row['term_name']);
        }
    }

    // 返回JSON格式响应并结束请求
    wp_send_json($data);
}

修改后的客户端代码（Elementor HTML模块） #

<select name="search_locations_list" id="search_locations_list" style="width:200px;">
    <option value="">Select location</option>
</select> 

<script>
jQuery('#search_locations_list').select2({
    ajax: { 
        url: "<?php echo admin_url('admin-ajax.php'); ?>", // 使用WordPress内置Ajax入口
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                searchTerm: params.term, // 传递用户输入的搜索关键词
                action: 'get_locations' // 指定要触发的Ajax动作，对应服务端钩子
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true
    }  
});
</script>

关键细节说明 #

1. Ajax入口：用admin_url('admin-ajax.php')自动生成正确路径，避免硬编码域名导致的兼容性问题。
2. 动作匹配：客户端传递的action: 'get_locations'对应服务端的wp_ajax_get_locations和wp_ajax_nopriv_get_locations钩子，确保所有用户都能正常访问。
3. 安全防护：通过$wpdb->prepare()和$wpdb->esc_like()处理搜索参数，彻底避免SQL注入风险。
4. 响应规范：用wp_send_json()返回数据，自动设置正确的响应头并结束请求，比手动echo json_encode()更符合WordPress开发规范。

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