原理：

　　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. java NIO（转载）

    (原文地址:https://zhuanlan.zhihu.com/p/23488863) NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型 ...

  2. 如何正确且成功破解跨平台数据库管理工具DbVisualizer？（图文详解）

    前期博客 基于JDBC的跨平台数据库管理工具DbVisualizer安装步骤(图文详解)(博主推荐) 上图,所示,说明这个还只是免费版而已,没又破解为Pro版本. 接下来,就是带领大家如何正确且成功破 ...

  3. 列举不少于6条的IE与FF脚本兼容性问题，需要写出命令

    (1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源,而FF用target获取 ...

  4. js中slice,splice和split方法的区别

    1.slice(数组) 用法:array.slice(start,end) 解释:该方法是对数组进行部分截取,并返回一个数组副本:参数start是截取的开始数组索引,end参数等于你要取的最后一个字符 ...

  5. XML文件中“>”和“<”的转码

    在xml文件中,大于号“>”和小于号“<”是不能被直接识别的,需要经过转码才可以被识别,转码后的格式如下: < < 小于 > > 大于

  6. SpringMVC总结三：请求Controller返回视图类型以及请求方式、参数介绍

    视图解析,请求Controller返回的视图类型: @Controller @RequestMapping("/test") public class TestController ...

  7. 分布式全文检索系统SolrCloud简介

    前言 本文简单描述SolrCloud的特性,基本结构和入门,基于Solr4.5版本. Lucene是一个Java语言编写的利用倒排原理实现的文本检索类库.Solr是以Lucene为基础实现的文本检索应 ...

  8. http头部信息解析

    HTTP 头部解释 1. Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type. 2. Accept-Chars ...

  9. jQuery div鼠标移动效果

    <head runat="server"> <meta http-equiv="Content-Type" content="tex ...

  10. C++ 输出精度和输出小数点位数

    有时候需要调节小数点的精度或者位数 #include<iostream> #include<iomanip> using namespace std; //设置数据精度 set ...