jsonp的三种跨域方式
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的三种跨域方式的更多相关文章
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- Javascript几种跨域方式总结
在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...
- 同源策略(same-origin policy)及三种跨域方法
同源策略(same-origin policy)及三种跨域方法 1.同源策略 含义: 同源是指文档的来源相同,主要包括三个方面 协议 主机 载入文档的URL端口 所以同源策略就是指脚本只能读取和所属文 ...
- JSONP和CORS两种跨域方式的简单介绍和解决方案实例
随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...
- JSONP和CORS两种跨域方式的优缺点及使用方法原理介绍
随着软件开发分工趋于精细,前后端开发分离成为趋势,前端同事负责前端页面的展示及页面逻辑处理,服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力,考虑到前后端同事开发工具 ...
- web三种跨域请求数据方法
以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head> < ...
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- 「JavaScript」JS四种跨域方式详解
原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...
- JSONP原理及实现跨域方式
今天做页面时,后台给了个接口:https://a.a.com/a/a.json,我页面的上线地址是:http://b.b.com.显而易见,因为浏览器同源策略的限制,通过ajax无法无法取得json的 ...
随机推荐
- Hacker communities collection
Copy from E安全 Hack Forums: Hack Forums是目前最为理想的黑客技术学习根据地.该论坛不仅在设计上面向黑客群体,同时也适用于开发人员.博主.游戏开发者.程序员.图形设计 ...
- AC日记——矩阵交换行 openjudge 1.8 01
01:矩阵交换行 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个5*5的矩阵(数学上,一个r×c的矩阵是一个由r行c列元素排列成的矩形阵列),将第n行和第m行交换,输出交换 ...
- Eclipse tooltip变黑的修正
- nmap脚本扫描使用总结
nmap的脚本默认目录为:/usr/share/nmap/scripts/ Nmap提供的命令行参数如下 -sC: 等价于--script=default,使用默认类别的脚本进行扫描 可更换其他类别 ...
- luogu1097统计数字[noip2007提高组Day1T1]
题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出 ...
- Zygote进程【1】——Zygote的诞生
在Android中存在着C和Java两个完全不同的世界,前者直接建立在Linux的基础上,后者直接建立在JVM的基础上.zygote的中文名字为"受精卵",这个名字很好的诠释了zy ...
- grunt-contrib-uglify压缩插件的常用配置属性
mangle:false(不混淆变量名和方法名,保留原有的名字),如果不配置,默认混淆,就是将所有方法名和变量都用a,b,c等字母替换 preserveComments : 'all'(不删除注释,还 ...
- HTML 学习笔记(链接)
HTML链接 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手. 我 ...
- 花生壳动态IP域名解析之python自动提交公网IP
#!/usr/bin/env python import re import os import time import random ip_current = '' while True: myip ...
- P3384 【模板】树链剖分
P3384 [模板]树链剖分 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节 ...