Ajax请求传递数据至PHP变量异常排查求助

问题描述 #

使用geoip-detect插件实现功能时，先通过AJAX GET请求调用/wp-admin/admin-ajax.php获取当前IP地理信息，控制台已正确输出Country: Ukraine和ISO Code: UA，请求均完成。随后将获取的值存入隐藏输入框，在complete回调中发起POST请求至主题目录下的/wp-content/themes/bethub/inc/product_layout/side_block.php，但PHP文件中通过$_POST['country']和$_POST['isoCode']获取到的变量为空。服务器环境为Nginx php-fpm，日志无错误信息。

初始AJAX请求代码 #

jQuery(document).ready(function($) {
   $.ajax({
      url: '/wp-admin/admin-ajax.php',
      method: 'GET',
      data: {
         action: 'geoip_detect2_get_info_from_current_ip',
      },
      success: function(response) {
         var country = response.country.names.en;
         var isoCode = response.country.iso_code;
  
         console.log('Country: ' + country);
         console.log('ISO Code: ' + isoCode);  
      },
      error: function(xhr, status, error) {
         console.error(error);
      }
   });    
});

更新后的AJAX请求代码 #

jQuery(document).ready(function($) {
    $.ajax({
      url: '/wp-admin/admin-ajax.php',
      method: 'GET',
      data: {
        action: 'geoip_detect2_get_info_from_current_ip',
      },
      success: function(response) {
        var country = response.country.names.en;
        var isoCode = response.country.iso_code;
  
        console.log('Country: ' + country);
        console.log('ISO Code: ' + isoCode);
  
        $('#hidden-country').val(country);
        $('#hidden-isoCode').val(isoCode);
      },
      complete: function() {
        var country = $('#hidden-country').val();
        var isoCode = $('#hidden-isoCode').val();
  
        $.ajax({
          url: '/wp-content/themes/bethub/inc/product_layout/side_block.php',
          method: 'POST',
          data: {
            country: country,
            isoCode: isoCode
          },
          success: function(response) {
            console.log(response);
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      },
      error: function(xhr, status, error) {
        console.error(error);
      }
    });
  });

PHP代码 #

$country = $_POST['country'];
$isoCode = $_POST['isoCode'];
echo "Country: " . $country . "<br>";
echo "ISO Code: " . $isoCode;

错误原因 #

1. 回调执行时机不匹配：complete回调会在请求结束后立即执行，不等待success回调完成赋值操作。也就是说，success里还没把值存入隐藏输入框，complete就已经读取并发送POST请求，此时拿到的是空值。
2. 冗余的隐藏输入框操作：明明已经在success回调中直接拿到了country和isoCode变量，没必要多此一举存入隐藏框再读取，反而增加了时序问题的风险。

修复方案 #

方案1：直接在success回调中发起POST请求 #

去掉隐藏输入框的冗余操作，直接用success中获取的变量发送请求，彻底避免时序问题：

jQuery(document).ready(function($) {
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        method: 'GET',
        data: {
            action: 'geoip_detect2_get_info_from_current_ip',
        },
        success: function(response) {
            var country = response.country.names.en;
            var isoCode = response.country.iso_code;

            console.log('Country: ' + country);
            console.log('ISO Code: ' + isoCode);

            // 直接使用获取到的变量发起POST请求
            $.ajax({
                url: '/wp-content/themes/bethub/inc/product_layout/side_block.php',
                method: 'POST',
                data: {
                    country: country,
                    isoCode: isoCode
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
});

方案2：遵循WordPress AJAX规范（推荐） #

WordPress不建议直接请求主题目录下的单独PHP文件，建议通过admin-ajax.php统一处理，同时加入安全校验：

1. 在主题functions.php中注册自定义AJAX动作：

// 登录用户和未登录用户都能访问
add_action('wp_ajax_handle_country_data', 'handle_country_data_callback');
add_action('wp_ajax_nopriv_handle_country_data', 'handle_country_data_callback');

function handle_country_data_callback() {
    // 校验非空，避免报错
    $country = isset($_POST['country']) ? sanitize_text_field($_POST['country']) : '';
    $isoCode = isset($_POST['isoCode']) ? sanitize_text_field($_POST['isoCode']) : '';
    
    echo "Country: " . $country . "<br>";
    echo "ISO Code: " . $isoCode;
    
    wp_die(); // 必须调用此函数结束AJAX请求
}

2. 修改JS中的POST请求：

jQuery(document).ready(function($) {
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        method: 'GET',
        data: {
            action: 'geoip_detect2_get_info_from_current_ip',
        },
        success: function(response) {
            var country = response.country.names.en;
            var isoCode = response.country.iso_code;

            console.log('Country: ' + country);
            console.log('ISO Code: ' + isoCode);

            // 通过admin-ajax.php处理请求
            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                method: 'POST',
                data: {
                    action: 'handle_country_data', // 对应functions.php中的动作名
                    country: country,
                    isoCode: isoCode
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
});

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