如何在Javascript中引用WordPress目录常量解决AJAX请求404问题

a) 快速解决当前AJAX 404问题 #

你遇到的路径失效核心原因有两个：

• AJAX请求的相对路径是相对于浏览器当前访问的页面URL，而非JS文件的物理存储路径，所以按照JS文件位置计算的../../相对路径无法匹配到正确的URL
• 后缀为.js的文件默认不会被服务器的PHP解析器处理，所以文件内的<?php ?>代码会直接作为普通字符串输出，不会执行

临时修复方法：直接填目标PHP文件的完整绝对URL作为请求地址，你的场景下完整URL为 http://localhost:8888/MyDemo/wp-content/plugins/xxx.php，填入即可临时跑通流程。但该方法不符合WordPress规范，存在安全风险，推荐使用下方的标准实现方案。

b) WordPress标准最佳实践实现（无需修改functions.php） #

WordPress官方提供了统一的AJAX处理机制，所有AJAX请求统一走admin-ajax.php入口，无需单独调用自定义PHP文件，所有逻辑都可以在你的插件代码内完成，实现步骤如下：

步骤1：在插件主文件中注册脚本并注入动态参数 #

使用wp_localize_script函数向JS文件传递动态生成的AJAX地址等参数，不需要在JS内嵌入PHP代码，示例代码：

// 挂载脚本注册逻辑到wp_enqueue_scripts钩子
add_action('wp_enqueue_scripts', 'your_plugin_enqueue_assets');
function your_plugin_enqueue_assets() {
    // 注册你的自定义JS文件，替换成你实际的JS文件地址
    wp_enqueue_script(
        'your-custom-js',
        get_template_directory_uri() . '/static/my-js.js',
        array('jquery'), // 声明依赖jQuery
        '1.0',
        true // 加载到页脚
    );
    // 向JS注入动态参数，会生成名为your_ajax_obj的全局JS对象
    wp_localize_script(
        'your-custom-js',
        'your_ajax_obj',
        array(
            'ajax_url' => admin_url('admin-ajax.php'), // 官方统一AJAX处理地址
            'nonce' => wp_create_nonce('your_ajax_check_nonce') // 安全校验用的nonce
        )
    );
}

步骤2：在插件主文件中添加AJAX处理逻辑 #

把原来写在xxx.php里的查询逻辑放到AJAX钩子回调中，不需要保留单独的xxx.php文件：

// 处理登录用户的AJAX请求
add_action('wp_ajax_get_location_data', 'your_ajax_handler');
// 处理未登录用户的AJAX请求，不需要支持未登录用户可以删掉这行
add_action('wp_ajax_nopriv_get_location_data', 'your_ajax_handler');

function your_ajax_handler() {
    // 先做安全校验，防止CSRF攻击
    if (!wp_verify_nonce($_POST['nonce'], 'your_ajax_check_nonce')) {
        wp_die('非法请求');
    }
    // 获取传递的参数
    $loc_id = intval($_POST['loc_id']);
    // 这里写你原来xxx.php里的查询逻辑，输出要返回的HTML内容
    // ...你的业务逻辑...
    // 结束请求，必须加wp_die()，否则会返回多余的0
    wp_die();
}

步骤3：修改你的AJAX请求代码 #

if(selID){
    $.ajax({
        type: 'POST',
        url: your_ajax_obj.ajax_url,
        data: {
            action: 'get_location_data', // 和步骤2的钩子名后缀保持一致
            loc_id: selID,
            nonce: your_ajax_obj.nonce
        },
        success:function(html){
            $('#selOne').html(html);
            $('#selTwo').html(html);
        }
    }); 
}else{
   /* 其他原有逻辑 */
}

该方案的优势： #

• 无路径问题：admin_url会动态生成正确的AJAX地址，不管站点安装在根目录还是子目录都不会出错
• 安全合规：内置nonce校验防止CSRF攻击，不需要暴露自定义PHP文件地址，避免恶意调用
• 无需修改主题的functions.php，所有逻辑都在你的插件代码内，符合插件开发规范

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