JSONP的使用示例（以及jquery版jsonp）超简单
前言：
平时工作中很少跨域，很少用到jsonp，但是几乎每次面试都会被问到这个问题。很崩溃。
菜鸟教程上的jsonp教程就很好。这里做个笔记，自己捋一遍。
Jsonp（JSON with Padding）是json的一种使用模式，可以让网页从别的域名那获取资料，即跨域读取数据。
jsonp需要服务端配合
这里使用菜鸟教程提供的一个地址，任何一台电脑的本地都可以测试使用：http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
前端，原生js的jsonp代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
本地测试效果图：
jQuery使用JSONP代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>'; $('#divCustomers').html(html);
});
</script>
</body>
</html>
摘自： 菜鸟教程-JSONP教程
2019年，加油！
JSONP的使用示例（以及jquery版jsonp）超简单的更多相关文章
- jQuery倒计时代码(超简单)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
- jquery使用jsonp进行跨域调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...
- jQuery 调用jsonp实现与原理
jQuery 调用jsonp实现与原理 您的评价: 收藏该经验 阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...
- JSONP的小示例
jQuery中JSONP的两种实现方式: 都很简单,所以直接上代码! 前台代码如下: <script type="text/javascript"> $(functio ...
- jQuery的jsonp跨域是这么回事.
实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...
- 基于jQuery的Jsonp跨域[Get方式]
由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...
- jQuery中jsonp函数实现
由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...
随机推荐
- ubuntu-删除内核
今天进入公司第一天,公司需要给电脑安装ubuntu,这个是由it部门帮忙安装的.但是,我不小心升级了内核版本,接下来就悲剧了,因为内核版本升级以后,直接导致了环境错误,很多公司内部使用的工具都不能用了 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- Linux平台下Ntop流量监测安装，并实现Netflow全过程
Linux平台下Ntop流量监测安装,并实现Netflow全过程 更多原创教学视频详见: http://you.video.sina.com.cn/m/1443650204 本文出自 "李晨 ...
- 分享js寄生组合模式继承
function person(){ this.name = 'taobao'; this.showMess = function(){ return this.name; } } person.pr ...
- Atcoder ABC 071 C,D
C - Make a Rectangle Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement W ...
- IBM磁盘阵列及文件系统的管理
一.几个基本概念 物理卷(PV):一个物理卷指一块硬盘 卷组(VG):卷组是可用物理硬盘的集合,可以逻辑地看成一块大硬盘 物理分区(PP):卷组中物理卷划分成固定大小的块(缺省为4MB) 逻辑卷(LV ...
- jQuery过滤选择器具体解释
基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("backgrou ...
- VmWare 与 宿主主机通信 STEP BY STEP (适用于刚開始学习的人)
基本原理 在虚拟机中有三种通信方式,例如以下图所看到的 1. Bridged(桥接模式) 在桥接模式下,VMware虚拟出来的操作系统就像是局域网中的一独立的主机,它能够訪问网内不论什么一台机器只是你 ...
- HDU1023 Train Problem II【Catalan数】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1023 题目大意: 一列N节的火车以严格的顺序到一个站里.问出来的时候有多少种顺序. 解题思路: 典型 ...
- 1.24 Python知识进阶 - 类与对象
类 语法格式: class Dog(object): print("the dog is barking ...") Dog为类名,object为要继承的基类,Dog类会从基类ob ...