WordPress中JS Ajax与PHP前后端变量传递问题及报错排查

咱们先把你遇到的问题拆解开，再一步步搞定：

问题1：直接访问插件PHP文件触发「Call to undefined function add_action()」错误 #

这个很好理解——WordPress插件的代码是完全依赖WordPress核心环境运行的。当你直接在浏览器里打开插件的PHP文件时，WordPress的核心函数（比如add_action）根本没被加载，自然会抛出这个错误。插件文件只能在WordPress正常加载它的时候运行，绝对不能单独访问。

问题2：Ajax请求返回页面头部而非预期字符串 #

你的Ajax请求直接指向了网站首页（http://localhost/wp/），WordPress收到请求后会完整渲染整个首页，包括头部、导航这些内容，所以你拿到的响应是整个页面的HTML，而不是你要的"test"字符串。咱们得用WordPress官方推荐的Ajax处理方式来解决这个问题。

完整修复方案 #

1. 修改插件PHP文件 #

咱们需要用WordPress自带的admin-ajax.php来处理Ajax请求，同时添加正确的钩子，还要把Ajax URL传递给前端脚本，避免硬编码：

<?php
/*
Plugin Name: WSN Plugin
description: Maintain all the connections to LimeSurvey
Version: 0.2
Author: M.Huber
Author URI: www
License: GPL2
*/

// 注册并本地化脚本，把Ajax URL传递给前端
add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
    // 把WordPress的Ajax处理地址注入到JS全局变量里
    wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

// 处理登录用户的Ajax请求
add_action( 'wp_ajax_call_this', 'handle_ajax_call' );
// 处理未登录用户的Ajax请求（如果你的功能允许游客使用的话）
add_action( 'wp_ajax_nopriv_call_this', 'handle_ajax_call' );

function handle_ajax_call() {
    // 可选但推荐：添加nonce验证防止CSRF攻击
    // check_ajax_referer( 'company_action_nonce', 'security' );
    
    // 输出你要返回的内容
    echo "test";
    // 必须用die()结束，否则WordPress会自动输出一个0在响应末尾
    die();
}

function wpb_new_company(){
    // 如果加nonce验证的话，这里要添加隐藏域
    // wp_nonce_field( 'company_action_nonce', 'security' );
    
    echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
    echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
    echo '<button onclick="callAjax()" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';
    echo '<div id="result">Hier steht das resultat</div>';
}
add_shortcode('new_company', 'wpb_new_company');

2. 修改JS文件 #

现在咱们用PHP传递过来的全局变量ajax_object.ajax_url作为请求地址，不再硬编码首页URL：

function callAjax(){
    $.ajax({
        type: "POST",
        url: ajax_object.ajax_url, // 使用WordPress提供的标准Ajax处理地址
        data: {
            action: 'call_this', // 对应PHP里wp_ajax_*钩子的后缀部分
            // 如果你要传递表单数据，可以在这里加：
            // company_name: $('#companyName').val(),
            // company_year: $('#companyYear').val(),
            // security: $('input[name="security"]').val() // 加了nonce的话要传这个
        },
        success:function(response) {
            alert(response);
            $('#result').html(response);
        }
    });
}

额外优化提示 #

• 添加nonce验证：这是WordPress开发的最佳实践，能有效防止跨站请求伪造攻击，上面的代码里已经留了注释示例，你可以按需启用。
• 处理表单数据：如果需要把用户输入的公司名称和年份传给后端，直接在Ajax的data字段里添加对应参数即可，后端用$_POST['company_name']就能拿到数据。

内容的提问来源于stack exchange，提问作者J. Doe