JSONP跨域请求数据的三种方式菜鸟教程_跨域入门教程

原生方式原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个标签,地址赋值给标签的src。
function callbackFunction(result, methodName)
{console.log(result);
}
function getJsonpData() {let

JSONP跨域请求数据的三种方式菜鸟教程

原生方式

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

JSONP跨域请求数据的三种方式菜鸟教程_跨域入门教程

<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>
海计划公众号
(0)
上一篇 2020/03/22 01:27
下一篇 2020/03/22 01:27

您可能感兴趣的内容

  • node里path是干什么的?使用帮助_node使用帮助

    Node.js path模块提供了一些用于处理文件路径的小工具,我们可以通过以下方式引入该模块:var path = require(“path”)path模块介绍:方法1、path.normalize(p)规范化路径,注意’..’ 和 ‘.’。2、path.join([path1][, path2][, …])用于连接路径。该方法的主要用途在于,会正确

    2020/03/22
  • 为什么前后端分离了,你比从前更痛苦?菜鸟知识_接口菜鸟教程网

    你有没有遇到过:前端代码刚写完,后端的接口又变了。接口文档永远都是不对的。测试工作永远只能临近上线才能开始。为什么前后端分离了,你比从前更痛苦?  前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:为什么接口会频繁变动?  设计之初没有想好。 这需要提高需求的理解能力和接口设计能力。  变动的成本较低。  德国有句

    2020/04/03
  • js严格模式(use strict)基础知识_严格模式使用教程

    “use strict”是ECMAScript 5引入的一条指令。指令不是语句(但非常接近于语句)。“usestrict”指令和普通的语句之间有两个重要的区别:1、它不包含任何语言的关键字,指令仅仅是一个包含一个特殊字符串直接量的表达式(可以是使用单引号也可以使用双引号),对于那些没有实现ECMAScript 5的JavaScript解释器来说,它只是一条没

    2020/03/29
  • 如何写出优雅耐看的JavaScript代码?攻略教程_代码基础教程

    前言在我们平时的工作开发中,大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。我们从以下几个方面进行探讨:变量1、变量命名一般我们在定义变量是要使用有意义的词汇命令,要做到见面知义//bad code
    const yyyymmdst

    2020/03/24
  • 从企业、站长的角度分析网站小白入门_站长零基础入门

    从企业的角度分析:1、建站为了什么?企业要先明白自己为什么要建网站,不能只是效仿别人,看到别人得到赢利与好处,就也想要上前分一杯羹。其实你并不明白这些好处是怎么来的,也不明白这些好处到底可以为企业带来什么?其实想要了解这些并不难,那就是在建站之前,定位企业到底需要一个什么样的网站,是服务型网站还是销售型网站,不同类型的网站搭建起来的要求功能当然也不同。2、我

    2020/03/23
  • 这些自动化运维技巧让网络运维不再背锅菜鸟攻略_运维指南攻略

    引言“网络就像wifi,没有故障的时候,就没有人意识到它的存在”,这句话有无数的翻版,但是对于网络工程师来说,这就是现身说法。由于即便是在上千人的公司,网络工程师的人数也仅仅是个位数,所以他们的工作也鲜为人知 。“网络是不是有问题?”这句话几乎成了所有SRE排错时的口头禅,如果这个时候网络工程师表示沉默,或者无法拿出足够的证据,那背锅几乎是无疑的。如何让网络

    2020/03/24
  • 网站开发需要哪些知识入门基础知识网页开发你需要知道的6件事_网页使用帮助

    很多人在动手开发网站之前都喜欢问,“我需要知道哪些事情?”每个开发者的答案可能都不太相同,通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案。于是,就有了下面这篇文章,一共总结出六个方面共计61条”网站开发须知”。关于网站开发,这样全面的概述性

    2020/04/05
  • HooX基础教程_一个基于 hook 的轻量级的 React 状态管理工具

    HooX基础教程 GitHub:https://github.com/wuomzfx/hoox 简介描述:一个基于 hook 的轻量级的 React 状态管理工具 HooX 是一个…

    2020/03/12
  • Codekit教程视频为Web前端打造的全能型神器

    Codekit基础入门 官方网址:https://codekitapp.com/ 简介描述:为Web前端打造的全能型神器 CodeKit简介 这是一款Mac平台集代码编辑与文件压缩…

    2020/03/05
  • es6 filter() 数组过滤方法总结小白常识_过滤教程视频

    1.创建一个数组,判断数组中是否存在某个值var newarr = [
    { num: 1, val: ‘ceshi’, flag: ‘aa’ },
    { num: 2, val: ‘ceshi2’, flag: ‘aa2’ }
    ]
    console.log(newarr.filter(item => item.num===2 ))2.也可以通过上面方法过滤掉nu

    2020/03/31
  • TypeScript基础以及在Vue中的应用使用帮助_TypeScript小白攻略

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue项目中使用TypeScript进行项目的开发。准备阅读博客前希望读者能够掌握如下技能,文章中也会相对应的讲解一些对于TypeScript基础进行讲解。本篇博客基

    2020/03/24
  • js图片上传和预览菜鸟攻略_上传基础知识

    一.css代码给标签的父级设置一个‘+’背景图,把的宽高设置得跟父级一样,且完全透明,这样点击的时候看似是点击的‘+’的节点,其实点击的是节点。.file-box {position: relative;display: inline-block;width:100px;height:100px;

    2020/03/23
  • MOGRT使用帮助_动态图形模板资源站

    MOGRT使用帮助 官方网址:https://mogrt.cn/ 简介描述:动态图形模板资源站 「MOGRT」是国内一家专门提供中文原创正版Premiere动态图形模板下载的网站,…

    2020/03/06
  • js内置对象菜鸟指南_对象指南攻略

    在js里,一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量(如var i=”aaa”),所有变量都有对象的性质。注意:通过字面量创建的对象在调用属性和方法时会被对象包装器暂时包装成一个对象,具有对象的性质。如var str=”我不是一个真的对象”;
    alert(str.length); //str被暂时包装成一个Stri

    2020/03/22
  • Js中setTimeout()、setInterval()、链式setTimeout()入门基础知识_定时器菜鸟知识

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的线程来执行。实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。有

    2020/03/24
  • Vue双向绑定的实现原理入门基础_双向绑定指南教程

    Vue.js双向绑定的实现原理实现数据绑定的做法有大致如下几种:发布者-订阅者模式(backbone.js)脏值检查(angular.js)数据劫持(vue.js)数据劫持: vue.js 采用数据劫持的方式,结合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的setter,getter以监听属性的变动,在数据变动时发布

    2020/04/05