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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
第一节--面向对象编程
2006/11/16 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
Yii分页用法实例详解
2014/12/04 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JS判断数组那点事
2017/10/10 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
劳动实践课感言
2014/02/01 职场文书
销售内勤岗位职责
2014/04/15 职场文书
实习单位指导教师评语
2014/12/30 职场文书
老公婚前保证书
2015/02/28 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers