如何使用 AJAX 将 PHP 值传递给 Wordpress 中的 js 脚本

Question

我已经尝试过 wp_localize_script 和 wp_add_inline_script：它没有按我期望的方式工作。

我在插件的 PHP 文件中有这个（它在其他地方与 wp_enqueue_scripts 一起排队，但我不需要在这里编写代码对吗？）：

        wp_register_script(
            'custom-profile-script',
            "{$this->plugin_url}js/custom-profile-plugin.js",
            array( 'jquery' ),
            null,
            false
        );

        wp_enqueue_script(
            'custom-profile-script'
        );

        wp_localize_script(
            'custom-profile-plugin',
            'wp_ajax',
            array( 
                'ajax_url' => admin_url( 'admin-ajax.php' ), 
                'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ),
                'plugin_url' => "url"
            )
        );
        wp_add_inline_script( 'custom-profile-plugin', 'const PHPVAR = ' . json_encode( array(
                'plugin_url' => "url"
        ) ), 'before' );

然后，在我的 js 文件中：

var data = {
        action: 'custom_user_plugin_update_meta_rating_value', 
        security: wp_ajax.ajaxnonce
    };

$.post(wp_ajax.ajax_url, data, function(result) {

        console.log(wp_ajax);
        console.log(PHPVAR.plugin_url);

});

第一个控制台日志（与 wp_localize_script 相关）是一个 object，其中包含具有正确值的“ajax_url”和“ajax_nonce”，但“plugin_url”没有出现，并且在我使用 wp_ajax.plugin_url 调用它时未定义。

第二个控制台日志（与 wp_add_inline_script 相关）告诉我 PHPVAR 未定义...

我不明白为什么前两个值使用本地化脚本正确传递，而不是第三个值，此外，为什么 wp_add_inline_script 不起作用。

Answer 1

您需要在wp_enqueue_script之后添加wp_localize_script并且还向wp_localize_script添加错误的句柄检查下面的代码。

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    true
);

wp_localize_script(
    'custom-profile-script',
    'wp_ajax',
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ), 
        'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ),
        'plugin_url' => "url"
    )
);

wp_enqueue_script(
    'custom-profile-script'
);

var data = {
    action: 'custom_user_plugin_update_meta_rating_value', 
    security: wp_ajax.ajaxnonce
};

$.post(wp_ajax.ajax_url, data, function(result) {
    console.log(wp_ajax);
    console.log(wp_ajax.plugin_url);
});

Answer 2

该脚本需要在页脚中注册，以便传递 PHP 值，如下所示：

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    true // register script in the footer
);

代替：

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    false // default value of the wp_register_script function that registers script in header
);