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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
js实现课堂随机点名系统
Nov 21 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
onpropertypchange
2006/07/01 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Java基础知识面试要点
2016/07/29 面试题
简短大学毕业感言
2014/01/18 职场文书
公司股权转让协议书
2014/04/12 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
离婚答辩状范文
2015/05/22 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python