原理：
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), ]
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})
<!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>
前端引入接口数据有两种方法，一种是通过dom添加标签的方式，通过<script>标签引入js文件内容，另一种就是通过js的ajax方法，固定格式获取数据。