1、通过jq的$.ajax()完成跨域,这是我比较喜欢的一种方式。

代码如下:

$.ajax({

  type:'get',

  async:true,

  url:'地址',

  dataType:'jsonp',   //这里一定要写

  jsonp:'callback',

  jsonCallback:'自定义的一个名字',

  success:function(data){

    console.log(data);

  },

  error:function(data){

    console.log(‘错误’)

  }

})

2、通过$.getJSON(又四个参数)

$.getJSON('http://api.douban.com/v2/movie/top250?callback=?',{
  'start':6,
  'count':10
  },function(data){
  console.log(data);
  var len=data.subjects.length;
  for(var i=0;i<len;i++){
  $('<tr>'+
  '<td>'+
  '<img src="'+data.subjects[i].images.large+'" />'+
  '</td>'+
  '<td style="width:200px;text-align: center;">'+
  '<span>'+data.subjects[i].directors[0].name+'</span>'+
  '</td>'+
  '<td style="width:200px;text-align: center;">'+
  '<span>'+data.subjects[i].title+'</span>'+
  '</td>'+
  '</tr>').appendTo($('table'));
  }
},'json')

3、js原生的 方式 :定义一个函数 操作返回的json数据,将这个函数作为回调函数,动态创建一个script标签,标签的src是数据地址在后面添上 callback=回调函数,将标签添加到body中。

(function(){
  var url='http://api.douban.com/v2/movie/top250?start=6&count=10';
  window.demo=function(res){
   alert(JSON.stringify(res));
  };
  var jsonp=function(url,fn){
   var ele=document.createElement('script');
   ele.src=url+'?callback='+fn;
   document.body.appendChild(ele);
  };
  jsonp(url,'demo');
 })

jsonp的三种跨域方式的更多相关文章

  1. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  2. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  3. 同源策略(same-origin policy)及三种跨域方法

    同源策略(same-origin policy)及三种跨域方法 1.同源策略 含义: 同源是指文档的来源相同,主要包括三个方面 协议 主机 载入文档的URL端口 所以同源策略就是指脚本只能读取和所属文 ...

  4. JSONP和CORS两种跨域方式的简单介绍和解决方案实例

    随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...

  5. JSONP和CORS两种跨域方式的优缺点及使用方法原理介绍

    随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...

  6. web三种跨域请求数据方法

    以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head>     < ...

  7. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  8. 「JavaScript」JS四种跨域方式详解

    原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...

  9. JSONP原理及实现跨域方式

    今天做页面时,后台给了个接口:https://a.a.com/a/a.json,我页面的上线地址是:http://b.b.com.显而易见,因为浏览器同源策略的限制,通过ajax无法无法取得json的 ...

随机推荐

  1. stanford coursera 机器学习编程作业 exercise 6(支持向量机-support vector machines)

    在本练习中,先介绍了SVM的一些基本知识,再使用SVM(支持向量机 )实现一个垃圾邮件分类器. 在开始之前,先简单介绍一下SVM ①从逻辑回归的 cost function 到SVM 的 cost f ...

  2. 2014 UESTC暑前集训动态规划专题解题报告

    A.爱管闲事 http://www.cnblogs.com/whatbeg/p/3762733.html B.轻音乐同好会 C.温泉旅馆 http://www.cnblogs.com/whatbeg/ ...

  3. AC日记——行程长度编码 openjudge 1.7 32

    32:行程长度编码 总时间限制:  1000ms 内存限制:  65536kB 描述 在数据压缩中,一个常用的途径是行程长度压缩.对于一个待压缩的字符串而言,我们可以依次记录每个字符及重复的次数.这种 ...

  4. guava函数式编程

    [Google Guava] 4-函数式编程 原文链接 译文链接 译者:沈义扬,校对:丁一 注意事项 截至JDK7,Java中也只能通过笨拙冗长的匿名类来达到近似函数式编程的效果.预计JDK8中会有所 ...

  5. uva10001 Garden of Eden

    Cellular automata are mathematical idealizations of physical systems in which both space and time ar ...

  6. C# .net中cookie值为中文时的乱码解决方法

    一.cookie的名称或子cookie的名称不能为中文,否则无法获得cookie 这个好办,名称不用中文即可 二.cookie的值为中文时候,取cookie的值会出现乱码 解决办法:存取cookie时 ...

  7. 准备NOIP2017 编辑距离问题 模板

    输入 第1行:字符串a(a的长度 <= 1000). 第2行:字符串b(b的长度 <= 1000). 输出   输出a和b的编辑距离   输入示例 kitten sitting 输出示例 ...

  8. SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

    通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...

  9. 推薦使用 Microsoft Anti-Cross Site Scripting Library v3.1

    原文链接:http://blog.miniasp.com/post/2009/09/27/Recommand-Microsoft-Anti-XSS-Library-V31.aspx 雖然我之前已經寫過 ...

  10. codevs 3165 爱改名的小融2

    3149 爱改名的小融 2 http://codevs.cn/problem/3149/ 题目描述 Description Wikioi上有个人叫小融,他喜欢改名.现在他的要求变了,只要是英文字母就是 ...