原理：

　　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. Angular2快速入门-3.多个组件（分离新闻列表页和详细页）

    上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来 新闻详细单独一个compo ...

  2. IDA Pro 权威指南学习笔记(三) - IDA 桌面简介

    IDA 的默认桌面如下图 工具栏区域(1)包含与 IDA 的常用操作对应的工具,可以使用 View -> Toolbar 显示或隐藏工具栏 可以使用 View -> Toolbars -& ...

  3. 用exp、dmp导入导出用户到同一个实例下时，类型type会有问题

    oralce的type都有唯一id,在同一个实例下,通过导入导出方法创建type时,会有唯一性问题 最好的解决方法使用impdb,expdb的方式导入导出 用oid=n解决. 实在不行,可用稍微麻烦的 ...

  4. Android Eclipse调试技巧

    在Android 应用程序开发中我们经常需要调试程序,可以说调试在我们的日常开发中起着十分重要的作用,下面就以Elipse开发环境总结一下调试技巧. 一.Debug 断点调试 所谓断点调试就是指在程序 ...

  5. http协议Keep-Alive

    Keep-Alive 是什么? 概观 默认情况下,HTTP链接通常在请求完成之后关闭.这意味着服务端在完成响应的交付之后便关闭了TCP链接.为了让链接保持打开,来满足多请求,可以使用keep-aliv ...

  6. day2-心得

    模块sys和os #!/usr/bin/env python # -*- coding: utf-8 -*- import sys sys.path #打印环境变量 print(sys.argv) # ...

  7. Linux系统SCSI磁盘扫描机制解析及命令实例(转)

    转载请在文首保留原文出处:EMC中文支持论坛 介绍 Linux系统扫描SCSI磁盘有几种方式?Linux新增LUN之后,能否不重启主机就认出设备?如果安装了PowerPath,动态添加/删除LUN的命 ...

  8. Java面向对象-面向对象编程之基本概念

    面向对象这个概念,每本书上的说法定义很多. 我自己根据我的经验,自己归档总结了下, 所谓面向对象,就是 以基于对象的思维去分析和解决问题,万物皆对象: 面向对象经常和面向过程放一起讨论: 这里举例, ...

  9. <%@ page import=""%>的用法

    转自:https://blog.csdn.net/huihui870311/article/details/455642111 <jsp:directive.page import=" ...

  10. USACO2.1.3 三值排序

      Description 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌序的时候. 在这个任务中可能的值只有三种1,2和3.我们用交 ...