如何将JSONP响应字符串转为JSON对象？（Widget开发场景）

首先，咱们得明确JSONP的核心要求：接口返回的必须是一个回调函数调用，并且把JSON数据作为参数传入，比如myfunction({"html": "<p>你的内容</p>"})，而不是纯字符串或者裸JSON。你的问题大概率是Mocky的响应格式没配置对，或者jQuery的AJAX参数设置有冲突，下面一步步解决：

1. 修正Mocky的响应配置 #

你提到Mocky支持添加?callback=xxx启用JSONP，但需要确保Mocky的响应内容是动态包裹在回调函数里的：

• 进入Mocky的编辑页面，把响应内容改成：{{callback}}({"html": "你要返回的HTML内容"})
• 同时把响应的Content-Type设置为application/javascript（JSONP的标准类型）

这样当请求带callback=myfunction或者jQuery自动生成的回调参数时，Mocky会自动替换{{callback}}为实际的函数名，返回正确的JSONP格式。

2. 简化jQuery的AJAX配置（推荐） #

其实jQuery对JSONP的处理非常自动化，不需要手动指定callback参数或者定义全局回调函数，直接设置dataType: 'jsonp'即可，它会自动生成临时回调、处理参数替换和解析：

$.ajax({ 
  url: "http://www.mocky.io/v2/5c9e901a3000004a00ee98a1", 
  type: 'GET', 
  dataType: 'jsonp', // 关键：指定为jsonp类型，jQuery自动处理回调
  success: function (data) { 
    // 这里的data已经是解析好的JSON对象了
    $('#example-widget-container').html(data.html);
    console.log(data);
  }, 
  error: function (xhr, status, error) { 
    alert('请求出错：' + error); 
  } 
});

为什么之前的代码有问题？ #

• 你手动设置了jsonp: "callback"和URL里的?callback=myfunction，同时又定义了全局的myfunction，但如果Mocky没有正确把响应包裹进myfunction()，返回的就是纯字符串，jQuery无法解析。
• 错误设置了contentType: "application/json"，JSONP请求本质是加载script资源，不需要这个头，反而可能干扰解析。

3. 如果一定要手动指定回调函数 #

如果你坚持要用自己定义的myfunction，那需要确保Mocky的响应是myfunction({"html": "你的内容"})，同时调整jQuery配置，避免自动生成回调：

// 保持你的全局回调函数
function myfunction(data) {
  console.log(data);
  $('#example-widget-container').html(data.html);
}

// 修改AJAX配置
$.ajax({ 
  url: "http://www.mocky.io/v2/5c9e901a3000004a00ee98a1", 
  type: 'GET', 
  dataType: 'jsonp',
  jsonpCallback: 'myfunction', // 指定用你定义的回调函数
  jsonp: "callback",
  success: function() {
    // 这里的success会在回调执行后触发，但数据已经在myfunction里处理了
  }, 
  error: function (xhr, status, error) { 
    alert('请求出错：' + error); 
  } 
});

这种方式不如自动处理灵活，尤其是在多个请求同时进行时容易冲突，所以更推荐第一种方案。

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