JSONP跨域请求数据的三种方式

原生方式

原生方式需要定义一个回调函数，用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签，地址赋值给标签的src。

<script>
function callbackFunction(result, methodName)
{
  console.log(result);
}
function getJsonpData() {
  let script = document.createElement('script');
  script.type="text/javascript";
  script.src='https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction';
  document.head.appendChild(script);
}
</script>

jQuery方式

jQuery方式须先引入jQuery文件。
代码中不用定义回调函数名，获取数据的地址把回调函数名改为"?"。
方式有两个：

$.ajax请求

<script>
  $.ajax({
    url: 'https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?',
    type: 'GET',
    dataType: 'JSONP',
  })
  .done(function(data) {
    console.log(data);
  })
  .fail(function(error) {
    console.log(error);
  })
  .always(function() {
    console.log("complete");
  });
</script>

$.getJSON请求。

<script>
  $.getJSON('https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?', function(data) {
    console.log(data);
  })
</script>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8115