原理：

　　1.创建script标签

　　2.src远程地址

　　3.返回的数据必须为js格式

1.因为浏览器处于安全原因不允许跨域请求，但是允许跨域倒入js文件，所以需要创建script标签

2.src远程地址，这里的地址代表着接口地址，因为接口提供的数据为js文件格式，里面有对应的function和数据。

3.接口的数据为js格式，浏览器会认为程序在倒入新的js文件，就会允许倒入数据，通过倒入这些数据，可以将这些数据提交给后台处理。

例：获取江西电视台的接口数据

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('req/', views.req),

]

urls.py

from django.shortcuts import render

import requests

# Create your views here.

def req(request):

    response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301')

    response.encoding = 'utf-8'

    return render(request, 'req.html', {'response':response.text})

views.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h3>request获取的数据</h3>

    {{ response }}

    <h3>js获取结果</h3>

    <!--xhr获取数据-->

    <input type="button" value="获取数据" onclick="getContent()">

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function getContent() {

            /* xhr只能做同一域名的http请求，对于不同域名，浏览器禁止跨域请求 */

            /*

            var xhr = new XMLHttpRequest();

            xhr.open('GET', 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403');

            xhr.onreadystatechange = function () {

                alert(xhr.responseText);

            };

            xhr.send();

            */

            /* jsonp通过引入js文件方式获取接口数据。（接口的返回值为相应数据以及需要调用的function名称） */

            /*

            var tag = document.createElement('script');

            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';

            document.head.appendChild(tag);

            document.head.removeChild(tag);

            */

            /* jsonp通过js获取接口数据 */

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',

                type: 'POST',

                dataType: 'jsonp',

                jsonp: 'callback',

                jsonpCallback: 'list'

            })

        }

        function list(arg) {

            console.log(arg)

        }

    </script>

</body>

</html>

req.html

前端引入接口数据有两种方法，一种是通过dom添加标签的方式，通过<script>标签引入js文件内容，另一种就是通过js的ajax方法，固定格式获取数据。

jsonp的原理及其使用的更多相关文章

  1. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  2. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  3. JSONP的原理

    JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...

  4. JSONP的原理与实现（基于jQuery）

    为什么会有JSONP?因为我们使用AJAX,使用AJAX可能就会遇到跨域的需求,如何解决呢,对,就是JSONP. 这里注意下JSON和JSONP不是一类,虽然他们只是一个字母只差,但是实际差别很大.这 ...

  5. jsonp实现原理

    jquery 封装在 ajax方法 里面的jsonp jsonp跨域的原理       1:使用script 标签发送请求,这个标签支持跨域访问       2:在script 标签里面给服务器端传递 ...

  6. jsonp详细原理之一

    /*script标签是不存在跨域请求的,类似的还有img,background:url,link 你可以想象一下,平时的这些标签都是可以直接引入外部资源的,所以是不存在跨域问题的*/ function ...

  7. jsonp的原理,应用场景,优缺点

    在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...

  8. 关于javascript跨域及JSONP的原理与应用

    同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...

  9. jsonp的原理和实现

    什么是JSONP? javascript高级程序设计中是这样介绍jsonp的: jsonp是JSON with padding(填充式JSON或参数式JSON )的简写,是应用JSON的一种新方法,在 ...

  10. jsonp 实现原理

      Jsonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个funct ...

随机推荐

  1. Linux学习笔记 -- 文本编辑器之 vi与vim

    vi/vim 的使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode). 这三种模式的 ...

  2. List批量赋值的几种方法

    List<int> list = new List<int>();list.AddRange(new int[] { 1, 5, 10, 20 ,33 }); //也可直接赋值 ...

  3. win7下cygwin 中 root用户的设置

    问题描述: cygwin 在 win10下安装完成后使用当前用户登录后看所在磁盘的文件权限是没有问题的,但在cygwin编译出来的文件的权限为空,这个问题可以使用以下方法来解决: 解决办法: 将cyg ...

  4. Django Rest Framework 4

    目录 一.分页 二.视图 三.路由 四.渲染器 一.分页 试问如果当数据量特别大的时候,你是怎么解决分页的? 方式a.记录当前访问页数的数据id 方式b.最多显示120页等 方式c.只显示上一页,下一 ...

  5. el表达式动态拼接变量_c:set的用法

    转自:https://blog.csdn.net/xb12369/article/details/39581955如 何在${}中使用${},例:${user.name_${user.id}},use ...

  6. 查看自己U盘格式

    转自:https://zhidao.baidu.com/question/220844418.html 选中U盘后,鼠标右键单击,选项菜单中点击属性,出的的属性窗口中的“常规”项里边就有U盘的基本信息 ...

  7. [原创]JMeter初次使用总结

    引言 最近开发 java 后端项目,对外提供Restful API接口,完整功能开发现已完成. 目前通过单测(68%行覆盖率)已保证业务逻辑正确性,同时也尝试使用JMeter进行压力测试以保证并发性能 ...

  8. OpenGL3.x,4.x中使用FreeImage显示图片的BUG-黑色，或颜色分量顺序错乱

    //参照FreeImage官网给出的CTextrueManager写的加载函数 //官方给的例子是用opengl3.0以下的旧GL写的,没有使用glGenerateMipmap(GL_TEXTURE_ ...

  9. oracle用户和权限

    在oracle中,一个服务器上一般只有一个数据库.在一个数据库中,不同的用户项目由不同的用户访问,每一个用户拥有自身创建的数据库对象,当一个用户想访问其它用户下的数据库对象时,必须由对方授予一定的权限 ...

  10. The centos disc was not found in any of your drives.Please insert the centos disc and press OK to retry

    查看虚拟机设置中关于CDROM的选项,将CDROM的状态改为已连接,不要奇怪,勾选上之后再按下OK就好了