WooCommerce结账时输入邮编自动填充州与城市的需求实现

不用Google地址自动补全的全字段填充逻辑，我们可以单独监听结账页面的配送邮编输入，通过邮编查询API获取对应城市和州信息后，精准填充到指定字段。以下是具体实现步骤：

1. 选择适配地区的邮编查询API #

优先选对应地区的官方或可靠第三方API，比如美国用USPS Zip Code Lookup API，欧洲或其他地区选当地邮政服务商的API。需要提前申请API密钥（以USPS为例，免费申请但需审核）。

2. 前端监听输入并触发查询 #

在结账页面添加JS代码，监听配送邮编输入框的失焦事件，验证邮编格式后发起AJAX请求到后端，避免前端直接暴露API密钥：

jQuery(document).ready(function($) {
    // 监听配送邮编输入框失焦事件
    $('#shipping_postcode').on('blur', function() {
        const postcode = $(this).val().trim();
        // 美国5位邮编验证，其他地区修改正则
        if (postcode.match(/^\d{5}$/)) {
            $.ajax({
                url: wc_checkout_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'get_city_state_by_postcode',
                    postcode: postcode,
                    security: wc_checkout_params.checkout_nonce
                },
                beforeSend: function() {
                    // 可选：添加加载提示
                    $('#shipping_postcode').after('<span class="loading">查询中...</span>');
                },
                complete: function() {
                    $('.loading').remove();
                },
                success: function(response) {
                    if (response.success) {
                        // 填充城市和州字段并触发验证
                        $('#shipping_city').val(response.data.city).trigger('change');
                        $('#shipping_state').val(response.data.state).trigger('change');
                    }
                },
                error: function() {
                    alert('邮编查询失败，请手动输入城市和州');
                }
            });
        }
    });
});

3. 后端AJAX处理逻辑 #

在主题的functions.php或自定义插件中添加PHP代码，处理前端请求并调用邮编API：

// 注册AJAX接口，支持登录和未登录用户
add_action('wp_ajax_get_city_state_by_postcode', 'get_city_state_by_postcode');
add_action('wp_ajax_nopriv_get_city_state_by_postcode', 'get_city_state_by_postcode');

function get_city_state_by_postcode() {
    // 验证WooCommerce结账nonce
    check_ajax_referer('checkout_nonce', 'security');
    
    $postcode = sanitize_text_field($_POST['postcode']);
    $usps_api_key = 'YOUR_USPS_API_KEY'; // 替换为你的USPS密钥

    // 构建USPS API XML请求
    $xml_request = sprintf(
        '<?xml version="1.0" encoding="UTF-8"?>
        <ZipCodeLookupRequest USERID="%s">
            <ZipCode ID="1">
                <Zip5>%s</Zip5>
            </ZipCode>
        </ZipCodeLookupRequest>',
        esc_attr($usps_api_key),
        esc_attr($postcode)
    );

    $api_url = 'https://secure.shippingapis.com/ShippingAPI.dll?API=ZipCodeLookup&XML=' . urlencode($xml_request);
    $api_response = wp_remote_get($api_url);

    if (is_wp_error($api_response)) {
        wp_send_json_error('API请求失败');
        return;
    }

    $xml_response = simplexml_load_string(wp_remote_retrieve_body($api_response));
    if (isset($xml_response->ZipCode->City, $xml_response->ZipCode->State)) {
        wp_send_json_success([
            'city' => ucwords(strtolower((string)$xml_response->ZipCode->City)),
            'state' => (string)$xml_response->ZipCode->State
        ]);
    } else {
        wp_send_json_error('未找到对应城市和州');
    }
}

4. 地区适配调整 #

• 如果是其他国家，替换API为当地服务商（比如英国Royal Mail、国内邮政API），并修改前端邮编验证正则和后端请求逻辑。
• 若使用非USPS API，比如第三方邮编数据库，可以直接查询本地数据库，避免外部API调用延迟。

5. 额外优化点 #

• 允许用户手动修改自动填充的字段，避免API返回错误时无法继续结账。
• 添加输入长度判断，比如国内邮编6位，输入满6位自动触发查询，提升体验。
• 缓存API查询结果，减少重复请求，提升性能。

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