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 ...
随机推荐
- 一些优秀的学习网站(Android)
突然发现自己学习没有总结,从今天开始会持续更新此博文,总结自己的学习情况,也便于自己时常查阅.官方文档就列举了,因为那是必读资料. 一.GitHub部分 1.我的github仓库地址 收藏了我常看的开 ...
- MATLAB 软件学习
what 列出当前目录或指定目录下的M\MAT 和 MAX 文件 … 在语句行尾端表示该行未完 ! 调用操作系统的命令 isvarname 判断变量名是否有效 声明全局变量 变量名前加 ...
- kafka删除主题
hdp集群默认不能删除kafka主题,如果要删除,需要在ambari上进行配置,将enable delete设置为true.
- linux命令行打开图片
1.用预装的eog eog a.jpg 2.安装 imagemagick display a.jpg
- C# Unable to load DLL 'WzCanDll.dll':找不到指定的模块
一.打开app无法加载DLL 我用C++编写的DLL,然后用C#写的界面APP,在自己的电脑上打开没有问题,放在其它电脑上就出现无法加载DLL库的问题,一连接APP就会出现问题,如下图所示: 二.解决 ...
- ZOJ 3524 Crazy Shopping
Crazy Shopping Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...
- DataGridView控件绑定数据源
前言: 近期听说DataGridView控件能直接绑定数据源.而不用穿越这层那层的忍辱负重.获取数据.真是高兴的屁颠屁颠的.后来一想二狗肯定不会弄.特意写了一个笨蛋版的教程--也算记录生活.欢度端午了 ...
- SDUT--Pots(二维BFS)
Pots Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 You are given two pots, having the ...
- node.js是什么
node.js是什么 一.总结 一句话总结:Node.js 就是运行在服务端的 JavaScript. 二.node.js是什么 简单的说 Node.js 就是运行在服务端的 JavaScript. ...
- android 仿ios 对话框已封装成工具类
对话框 在android中是一种非经常见的交互提示用户的方式,可是非常多产品狗都叫我们这些做android的仿ios,搞的我们android程序猿非常苦逼,凭什么效果老是仿ios,有没有一点情怀,只是 ...