借助jQuery从外部XML链接抓取信息失败，求解决方案

我来帮你分析下原代码的核心问题，然后给出适合WordPress环境的可行解决方案：

问题出在哪？ #

你的代码里用了dataType: 'jsonp'，但目标资源是XML文件——JSONP只适用于跨域获取JSON格式的数据，根本无法解析XML，这就是代码失效的主要原因。另外，浏览器的同源策略会阻止前端直接跨域请求XML资源（除非目标服务器配置了CORS允许你的域名访问）。

适合WordPress的最优方案：后端代理 #

因为WordPress本身是PHP环境，最稳妥的方式是通过服务器端来抓取XML（服务器端不受同源策略限制），再把解析好的数据返回给前端。这样既解决了跨域问题，也能正确处理XML内容。

步骤1：在主题functions.php中添加代理函数 #

这段代码会创建一个AJAX接口，用来获取并解析外部XML：

// 后端获取并解析外部XML的AJAX接口
function fetch_external_xml_data() {
    $xml_source_url = 'http://42netmedia.com/smart/signal_onAir10.xml';
    
    // 使用WordPress内置函数安全获取XML内容
    $xml_response = wp_remote_get($xml_source_url);
    
    // 检查请求是否失败
    if (is_wp_error($xml_response)) {
        wp_send_json_error('无法获取外部XML数据');
    }
    
    // 提取XML内容并解析为对象
    $xml_content = wp_remote_retrieve_body($xml_response);
    $xml_object = simplexml_load_string($xml_content);
    
    if (!$xml_object) {
        wp_send_json_error('XML解析失败');
    }
    
    // 提取你需要的nowOnAirTitle字段
    $now_on_air_title = (string)$xml_object->nowOnAirTitle;
    
    // 返回格式化后的成功数据
    wp_send_json_success([
        'now_on_air' => $now_on_air_title
    ]);
}

// 注册AJAX动作（支持登录/未登录用户访问）
add_action('wp_ajax_get_on_air_data', 'fetch_external_xml_data');
add_action('wp_ajax_nopriv_get_on_air_data', 'fetch_external_xml_data');

// 注册前端脚本并传递AJAX地址
function enqueue_on_air_script() {
    wp_enqueue_script(
        'on-air-script',
        get_template_directory_uri() . '/js/on-air.js', // 替换成你实际的脚本存放路径
        ['jquery'],
        '1.0',
        true // 设置为true在页面底部加载，优化性能
    );
    
    // 把WordPress的AJAX地址传递给前端脚本
    wp_localize_script('on-air-script', 'OnAirAjax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_on_air_script');

步骤2：创建前端脚本文件（比如js/on-air.js） #

用jQuery调用刚才创建的AJAX接口，把数据展示到页面指定元素：

jQuery(document).ready(function($) {
    $.ajax({
        type: 'POST',
        url: OnAirAjax.ajax_url, // 从后端传递过来的AJAX地址
        data: {
            action: 'get_on_air_data' // 对应后端注册的动作名
        },
        success: function(response) {
            if (response.success) {
                // 把解析好的数据追加到目标元素
                $('.my-site-element').append(response.data.now_on_air);
            } else {
                console.error('加载数据失败:', response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求出错:', error);
        }
    });
});

备选方案：如果目标服务器支持CORS #

如果目标XML服务器配置了Access-Control-Allow-Origin允许你的域名访问，你可以直接修改前端代码，去掉JSONP，改用XML类型的AJAX请求：

jQuery(document).ready(function($) {
    $.ajax({
        type: 'GET',
        url: 'http://42netmedia.com/smart/signal_onAir10.xml',
        crossDomain: true,
        dataType: 'xml', // 改为xml类型
        success: function(xml) {
            // 直接解析XML并提取需要的内容
            var nowOnAirTitle = $(xml).find('nowOnAirTitle').text();
            $('.my-site-element').append(nowOnAirTitle);
        },
        error: function(xhr, status, error) {
            console.error('请求失败:', error);
        }
    });
});

不过这个方案的前提是对方服务器允许你的域名跨域访问，否则还是会被浏览器拦截，所以更推荐第一种后端代理的方式。

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