jsonp格式前端发送和后台接受写法的代码详解


Posted in Javascript onNovember 07, 2019

什么是JSONP?

先说说JSONP是怎么产生的:

其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

什么是JSON?

前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点。

JSON的优点:

1、基于纯文本,跨平台传递极其简单;

2、Javascript原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5、容易编写和解析,当然前提是你要知道数据结构;

JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。

好了,回归正题,

jsonp是ajax提交的一种格式不会受跨域限制

一.前端发送

<button>11111</button>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
<script>
  document.querySelector('button').onclick = function () {
    $.ajax({
      url: 'http://localhost:8000/test',
      type: 'get',
      dataType: 'jsonp',
      data: {      //注意内容必须为字典
        aaa:aaa    //字典里内容前面key可以不加"",默认会给你加上""变成字符串但是不会当成变量
      },         //字典后面value有''为字符串,没有为变量
      success: function (data) {
        console.log(data);
      }
    });
  }
</script>

二.后台接受

#我就拿python举例,其他也大同小异
from django.shortcuts import render,HttpResponse,redirect
def test(request):
  callback=request.GET.get('callback')
  print(dict(request.GET)) #传过来的内容他会打散,具体的自己看一下就知道
  
  #注意点返回的字符串必须是 'callback+("返回的字符串")' 这样的一个字符串,不然前端不会接收
  return HttpResponse(callback+'("ok")')

总结

以上所述是小编给大家介绍的jsonp格式前端发送和后台接受写法的代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
js中call与apply的用法小结
Dec 28 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Vuex简单入门
Apr 19 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
vue时间格式化实例代码
Jun 13 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 #Javascript
详解Angular cli配置过程记录
Nov 07 #Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 #Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 #Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 #Javascript
JS实现随机抽选获奖者
Nov 07 #Javascript
Vue中错误图片的处理的实现代码
Nov 07 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
JavaScript 指导方针
2007/04/05 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Python实现栈的方法
2015/05/26 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
北大青鸟学生求职信
2013/09/24 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
安全协议书
2014/04/23 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
党支部先进事迹材料
2014/12/24 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python