使用AJAX查询SQL：WordPress插件适配教程后仍遇问题求助

看起来你已经搞定了jQuery冲突的第一步，但还有几个WordPress特有的细节需要调整，我来帮你一步步排查和修复：

1. 内联脚本的加载顺序问题 #

你直接在sqlTest()里输出内联脚本，大概率会遇到jQuery还没加载，脚本就先执行了的情况（WordPress默认把jQuery放在页脚加载）。正确的做法是用WordPress官方的wp_add_inline_script来关联脚本，确保它在jQuery之后运行：

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'mein-plugin', plugins_url( 'style.css', __FILE__ ) );
    wp_enqueue_style( 'mein-plugin' );
    
    // 加载jQuery，可选指定在头部加载（默认是footer）
    wp_enqueue_script( 'jquery', '', array(), false, false );
    
    // 添加依赖于jQuery的内联脚本，这里可以用$作为别名简化代码
    $inline_script = "
        jQuery(function($){
            $('#inp').keyup(function() {
                var inputVal = $(this).val();
                $.ajax({
                    url: myPlugin.ajaxUrl, // 后续通过localize传递WordPress AJAX地址
                    type: 'POST',
                    data: {
                        action: 'fetch_mysql_data', // WordPress AJAX的唯一标识
                        input: inputVal,
                        nonce: myPlugin.nonce // 安全验证用的随机数
                    },
                    success: function(response) {
                        $('.results').html(response);
                    },
                    error: function(xhr) {
                        console.log('请求出错：', xhr.responseText); // 方便调试
                    }
                });
            });
        });
    ";
    wp_add_inline_script( 'jquery', $inline_script );
    
    // 把WordPress AJAX的必要参数传递给前端
    wp_localize_script( 'jquery', 'myPlugin', array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_plugin_nonce')
    ) );
}

2. WordPress AJAX请求的正确写法 #

原教程的普通PHP请求逻辑在WordPress里不适用，必须用WP自带的AJAX机制，你需要在插件里添加AJAX处理函数：

// 处理登录用户的AJAX请求
add_action('wp_ajax_fetch_mysql_data', 'fetch_mysql_data_callback');
// 处理未登录用户的AJAX请求（如果你的插件需要对游客开放）
add_action('wp_ajax_nopriv_fetch_mysql_data', 'fetch_mysql_data_callback');

function fetch_mysql_data_callback() {
    // 先做安全验证
    check_ajax_referer('my_plugin_nonce', 'nonce');
    
    // 过滤用户输入，避免SQL注入
    $input = sanitize_text_field($_POST['input']);
    
    // 用WordPress的$wpdb类操作数据库，不要直接用原生mysql函数
    global $wpdb;
    $results = $wpdb->get_results(
        $wpdb->prepare("SELECT * FROM your_table WHERE your_column LIKE %s", '%' . $wpdb->esc_like($input) . '%')
    );
    
    // 输出查询结果
    if (!empty($results)) {
        foreach ($results as $row) {
            echo '<p>' . esc_html($row->your_column) . '</p>';
        }
    } else {
        echo '<p>No results found</p>';
    }
    
    // 必须用wp_die()结束AJAX请求，否则会返回多余内容
    wp_die();
}

3. 分离HTML结构与脚本 #

把sqlTest()简化成只输出HTML结构，不要混写脚本，这样代码更清晰也更容易维护：

function sqlTest() {
    return '<input type="text" id="inp" name="inp"/><div class="results"></div>';
}

4. 用浏览器控制台排查问题 #

打开浏览器开发者工具（F12）的Console标签，看看有没有JS语法错误或者AJAX请求失败的提示：

• 如果看到$ is not defined：说明jQuery加载顺序还是有问题，检查wp_enqueue_script的参数
• 如果AJAX返回400错误：大概率是nonce验证失败或者action名称不匹配
• 如果返回500错误：检查数据库查询语句是否正确

按照上面的步骤调整后，应该就能正常实现动态加载MySQL数据的功能了。

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