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 相关文章推荐
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 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编程中的__clone()方法使用详解
2015/11/27 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python 字符串格式化的示例
2020/09/21 Python
Python用SSH连接到网络设备
2021/02/18 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
规划编制实施方案
2014/03/15 职场文书
教师党员自我评价2015
2015/03/04 职场文书
惊天动地观后感
2015/06/10 职场文书
法制工作总结2015
2015/07/23 职场文书
开学典礼校长致辞
2015/07/29 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript