如何使用Ajax和jQuery从PHP文件文本字段获取数据到JavaScript文件

方案1：使用WordPress脚本本地化传值（无需Ajax，更简单） #

这种场景不需要额外发Ajax请求，直接在PHP端把配置值注入到你的JS全局变量中即可，操作步骤如下：

• 首先在你挂载脚本的钩子函数中，使用wp_localize_script()方法传值：

// 假设你注册的JS脚本句柄是'my-plugin-js'
function my_plugin_enqueue_scripts() {
    wp_enqueue_script( 'my-plugin-js', '你的JS文件路径', array('jquery'), '1.0', true );
    // 注入配置值到JS全局变量
    wp_localize_script( 'my-plugin-js', 'myPluginConfig', array(
        'jqueryFieldValue' => get_option('jquery-field'),
        'ajaxUrl' => admin_url('admin-ajax.php') // 后续需要用Ajax的话也可以一起传
    ) );
}
add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue_scripts' );

• 之后你在JS文件中可以直接获取值：

const fieldValue = myPluginConfig.jqueryFieldValue;
console.log(fieldValue); // 直接输出存在option中的值

方案2：必须用Ajax拉取的处理方法 #

如果你需要动态拉取最新值（比如用户输入后未提交就要获取），按以下步骤操作：

• 首先在PHP中注册Ajax处理钩子：

// 后台登录用户可用的Ajax接口
add_action('wp_ajax_get_jquery_field_value', 'my_plugin_get_field_value');
// 如果需要给未登录用户也开放该接口，再加下面这行
// add_action('wp_ajax_nopriv_get_jquery_field_value', 'my_plugin_get_field_value');
function my_plugin_get_field_value() {
    // 可选添加权限校验
    if (!current_user_can('manage_options')) {
        wp_send_json_error('无权限');
    }
    $value = get_option('jquery-field', '');
    wp_send_json_success($value);
}

• 然后在JS中发送Ajax请求即可：

jQuery.ajax({
    url: myPluginConfig.ajaxUrl, // 前面本地化传入的admin ajax地址
    method: 'POST',
    data: {
        action: 'get_jquery_field_value' // 对应钩子名中wp_ajax_后面的部分
    },
    success: function(res) {
        if (res.success) {
            console.log('拿到的字段值：', res.data);
        }
    }
})

常见踩坑点排查 #

• 你现有代码里input的value属性结尾多了一个空格，输出时会携带多余空格，可以改成value="<?php echo esc_attr(get_option('jquery-field'));?>"，添加esc_attr转义更安全，同时去掉多余空格
• 如果你要获取用户实时输入还未提交的值，直接用jQuery选择器获取即可：const currentInput = jQuery('#jquery-field').val();，不需要发送请求

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