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 ...
随机推荐
- 用css画三角形
当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...
- startActivity-两种start 方式
对于activity的启动有两种方式 1.startActivity-这种方式比较简单,我们就不做讲解了 2.startActivityForResult-这种启动方式可以实现父子activity双向 ...
- dreamweaver 8的替换功能
dreamweaver 8的替换功能 下面教你用dreamweaver 8的替换功能来删除这些冗余代码. 查找范围:文件夹(然后选取你需要替换的文件夹) 搜索:源代码查找:\btppabs=" ...
- 值得学习的html知识
这里零度为大家推荐几个值得学习的html知识,很有用的哦! 一.打开窗口即最大化 <script language="javaScript"> <!-- Begi ...
- 基于x86平台的Solaris安装视频(时长25分钟)
基于X86平台的Solaris安装视频 本视频分为三个部分分别在附件中1.2.3(第三部分附件较大请在这里下载:http://down.51cto.com/data/263614) ,远程连接的视频由 ...
- Android WebView页面加载优化
目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...
- PHP防止Xss攻击
mysql_real_escape_string() 所以得SQL语句如果有类似这样的写法:"select * from cdr where src =".$userId; 都要改 ...
- 通过CURL抓取页面中的图片路径并下载到本地
1.首页是图片处理页面downpic.php <?phpfunction getImage($url,$filename="") { if($url=="" ...
- Jquery学习总结(1)——Jquery常用代码片段汇总
1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){ $(document).bind("contextmenu",fun ...
- Java中JVM虚拟机详解
1. 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来 ...