如何获取远程JSONP接口的songtitle并赋值给JavaScript变量？

没问题，我来帮你搞定这个需求！首先看你提供的URL http://example.com/stats?json=1&callback=serverInfo，这是一个JSONP格式的接口（因为带了callback参数），这种接口不能用普通的fetch或者XMLHttpRequest来请求，得用JSONP的方式处理，下面给你两种可行的实现方案：

方案一：原生JavaScript实现（无依赖） #

JSONP的本质是通过动态创建<script>标签来加载远程脚本，服务器会把返回的JSON数据包裹在你指定的回调函数里，所以我们需要先定义好对应的回调函数：

// 定义和URL中callback参数一致的回调函数
function serverInfo(data) {
  // 从返回的data中提取songtitle字段，赋值给str变量
  var str = data.songtitle;
  
  // 这里可以添加你后续需要执行的逻辑，比如打印验证
  console.log(str); // 会输出: Live with the music station on the internet
}

// 动态创建script标签发起请求
var scriptTag = document.createElement('script');
scriptTag.src = 'http://example.com/stats?json=1&callback=serverInfo';
// 可选：添加加载失败的错误处理
scriptTag.onerror = function() {
  console.error('远程数据加载失败，请检查URL是否有效');
};
// 将script标签添加到页面中，开始请求
document.body.appendChild(scriptTag);

方案二：用jQuery简化实现（如果你的项目已经引入jQuery） #

jQuery对JSONP做了封装，写起来更简洁：

// 方法1：手动指定回调函数名
$.ajax({
  url: 'http://example.com/stats?json=1',
  dataType: 'jsonp',
  jsonpCallback: 'serverInfo', // 和URL中的callback参数对应
  success: function(data) {
    var str = data.songtitle;
    console.log(str);
  },
  error: function() {
    console.error('加载失败');
  }
});

// 方法2：让jQuery自动生成回调函数（更省心）
$.getJSON('http://example.com/stats?json=1&callback=?', function(data) {
  var str = data.songtitle;
  console.log(str);
});

关键注意点 #

• 如果你手动指定回调函数名（比如serverInfo），必须保证函数名和URL中callback参数的值完全一致，否则浏览器无法找到对应的回调函数执行。
• JSONP是专门用来解决跨域请求问题的，所以这个方案不需要担心跨域限制（只要服务器支持JSONP，你的URL带了callback参数说明是支持的）。
• 记得添加错误处理逻辑，避免请求失败时没有任何提示。

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