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 ...
随机推荐
- vim 解决tags递归查询问题
今天在vim下配置了两个插件,分别是exuberant-ctags 跟cscope.这两个插件主要是用来实现类.方法查询跟跳转.至于它们如何安装跟使用,网上教程一大堆,我也是按着别的大神教程一步步来的 ...
- 61.node.js开发错误——Error: Connection strategy not found
转自:https://blog.csdn.net/fd214333890/article/details/53457145
- vue ---- 实现手机端（左滑 删除。右划 正常）
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系 ...
- 3.cocos代码入口
模拟代码进入过程: main.cpp #include <iostream> #include "AppDelegate.h" #include "CCApp ...
- PCA and Whitening on natural images
Step 0: Prepare data Step 0a: Load data The starter code contains code to load a set of natural imag ...
- Kinect 开发 —— 用户交互设计的若干思考
Metro 风格 windows 8 Kinect Hub 手势原型设计 悬停选择 翻页控制 关节点重叠的处理方法 将箭靶设置在画面的边缘,这样玩家持弓的角度与屏幕保持一个大约45度的锐角,这 ...
- windows查看硬件信息系统信息
rem 查看cpu wmic cpu list briefrem 查看物理内存wmic memphysical list briefrem 查看逻辑内存wmic memlogical list bri ...
- Java-Spring-WebService最基础的配置示例
很早很早之前,就初步学习了WebService,感觉还是比较"好"的. 使用Web服务,感觉就像普通API一样,和HTTP接口比较起来. WebService有个很大的局限,就 ...
- D3.js加载csv和json数据
1.加载数据的基本命令 D3提供了方法可以对不同的数据类型进行加载,比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html(). <!DOCTY ...
- js全选反选按钮实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...