原理：

　　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实现)单例模式的七种写法

    第一种(懒汉,线程不安全): Java代码 public class Singleton { private static Singleton instance; private Singleton ...

  2. web新特性 之 WebSocket

    详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HT ...

  3. 内网渗透神器xerosploit

    项目地址:https://github.com/LionSec/xerosploit 安装完成后直接在终端输入xerosploit打开 显示了本机的内网ip,mac地址,网关,网卡,输入help查看帮 ...

  4. http协议请求响应内容示例

    POST http://www.cytxl.com.cn/api/common/login.php?XDEBUG_SESSION_START=netbeans-xdebug HTTP/1.1 Host ...

  5. 字节流之文件输出流FileOutputStream

    文件拷贝:

  6. Leetcode:ZigZag Conversion分析和实现

    问题的大意就是将字符串中的字符按锯齿状(倒N形)垂直由上向下放置,最后水平从左向右读取.比如 ABCDEFGHIJKLMN,4表示 A          G      M B      F  H    ...

  7. 使用GDB调试PHP代码，解决PHP代码死循环

    最近在帮同事解决Swoole Server问题时,发现有1个worker进程一直处于R的状态,而且CPU耗时非常高.初步断定是PHP代码中发生死循环. 下面通过一段代码展示如何解决PHP死循环问题. ...

  8. Servlet接口应用(开发servlet三种方式)

    参见 文库/java/javaEE全新学习教程2.2节 1.通过URL调用 2通过提交表单 3超链接 4 javascript写一个函数,调用这个函数 1,首先在工程的WebRoot文件夹下建立一个j ...

  9. NanoPi2

    https://item.taobao.com/item.htm?spm=a230r.1.14.9.Ijhc8S&id=526981593477&ns=1&abbucket=1 ...

  10. sfidsk创建可启动分区问题

    前言 由于工作上需要经常要为嵌入式设备制作启动SD卡,因此本人使用sfdisk编写了自动分区.格式化和安装文件的脚本.(不选择fdisk是因为它是为用户交互设计的,在脚本上使用不够方便) 实际使用过程 ...