Python學習---JSONP學習180130
阿新 • • 發佈：2018-08-02
world 隨機生成 text b-s urn setattr 機制 play ucc
同源策略機制
同源：協議://IP:端口【協議，域名，端口相同】
跨域：知道對方接口，同時對方返回的數據也必須是Jsonp格式的
問題描述：Ajax跨域請求數據的時候，實際瀏覽器已經拿到數據，但是瀏覽器由於同源策略隱藏了這些內容,不給我們看這些數據。換言之，Ajax不能跨域請求數據。
問題解決：<script src="">
有src屬性的標簽都可以跨域請求數據，這也就是為什麽img我們可以引用別的網站的圖片
JSONP的原型：創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
JSONP一定是GET請求
Jsonp實例一: 利用script標簽的src屬性
padding: 就是函數，將數據放在在函數內，然後打包發送給前臺、
缺點：前臺script裏必須要有一個函數，處理一個寫一個函數，因為本質是利用函數接收參數
正確應該動態添加script標簽和內容
settigs.py：
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)], # 設置templates的路徑為Django以前版本
# ‘DIRS‘: [], # 註釋掉該行，此為Django 2.0.1最新版本
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
...省略默認配置
STATIC_URL = ‘/static/‘
TEMPLATE_DIRS = (os.path.join(BASE_DIR, ‘templates‘),) # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 現添加的配置,這裏是元組，註意逗號templates/ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<script src="/static/jquery-3.2.1.js"></script>
<script>
function test(data) {
console.log(data)
}
</script>
{#跨站請求內容#}
<script src="http://127.0.0.1:8081/jquery_ajax_test/"></script>
</html>mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Jquery_Ajax
url(r‘ajax-jquery/‘, views.ajax_jquery),
# jquery_ajax_test
url(r‘jquery_ajax_test/‘, views.jquery_ajax_test),
]
views.py
from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
return render(request, ‘ajax_jquery.html‘)
# Jquery --> ajax
import json
def jquery_ajax_test(request):
print(‘request.POST‘, request.POST)
# return HttpResponse(‘hello‘) # 錯誤,此時跨域返回給scrip標簽一個未定義的hello變量
# return HttpResponse(‘var hello‘) # 正確,此時跨域返回給scrip標簽一個定義但沒有內容的hello變量
return HttpResponse(‘test("hello")‘)
頁面顯示：
動態的創建script的JSonp實例：
settigs.py：
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)], # 設置templates的路徑為Django以前版本
# ‘DIRS‘: [], # 註釋掉該行，此為Django 2.0.1最新版本
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
...省略默認配置
STATIC_URL = ‘/static/‘
TEMPLATE_DIRS = (os.path.join(BASE_DIR, ‘templates‘),) # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 現添加的配置,這裏是元組，註意逗號
templates/ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{#動態跨站請求內容#}
<script>
function addScriptTag(src){
var script = document.createElement(‘script‘);
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
{# document.body.removeChild(script); #}
}
function SayHi(arg){
alert("Hello " + arg)
}
function f(){
addScriptTag("http://127.0.0.1:8081/jquery_ajax_test/?callback=SayHi")
}
</script>
</html>
mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Jquery_Ajax
url(r‘ajax-jquery/‘, views.ajax_jquery),
# jquery_ajax_test
url(r‘jquery_ajax_test/‘, views.jquery_ajax_test),
]
views.py
from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
return render(request, ‘ajax_jquery.html‘)
# Jquery --> ajax
def jquery_ajax_test(request):
print(‘request.GET‘, request.GET)
func = request.GET.get(‘callbacks‘, None)
print(‘func;‘, func)
return HttpResponse("%s(‘world‘)" % func)
頁面顯示：
註意：
這裏運行了2個環境： python manage.py runserver 8081
項目本身是：http://127.0.0.1:8080/ajax-jquery/
jQuery對JSONP的實現
1. 使用Jquery定義的回調函數名：
$.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
console.log("successfully, hello " + arg)
});
註意的是在url的後面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。
2. 使用自定義的函數名：
形式一： 自定義函數 + 調用指定函數 【不推薦】
function SayHi() {
...
}
$.ajax({
url:"http://127.0.0.1:8002/get_byjsonp",
dataType:"jsonp", # 要求服務器返回一個JSONP格式的數據，一個函數套著一個數據形式，否則返回原類型
jsonp: ‘callback‘,
jsonpCallback:"SayHi"
});
註意：jsonp: ‘callback‘ + jsonpCallback:"SayHi" --拼湊一個鍵值對發送過去----> ‘callback‘:‘SayHi‘
形式二：自定義函數 + 不用指定函數名 【推薦】
$.ajax({
url:"http://127.0.0.1:8002/get_byjsonp",
dataType:"jsonp", //必須有，告訴server，這次訪問要的是一個jsonp的結果。
jsonp: ‘callback‘, //jQuery幫助隨機生成的：callback="wner"
success:function(data){ # 接收後臺傳遞過來的data數據即可
alert(data)
}
});
getJSON之使用JQuery定義的函數名--實例
settigs.py：
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)], # 設置templates的路徑為Django以前版本
# ‘DIRS‘: [], # 註釋掉該行，此為Django 2.0.1最新版本
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
...省略默認配置
STATIC_URL = ‘/static/‘
TEMPLATE_DIRS = (os.path.join(BASE_DIR, ‘templates‘),) # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 現添加的配置,這裏是元組，註意逗號
templates/ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
function f() {
$.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
console.log("successfully, hello " + arg)
});
}
</script>
</html>
mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Jquery_Ajax
url(r‘ajax-jquery/‘, views.ajax_jquery),
# jquery_ajax_test
url(r‘jquery_ajax_test/‘, views.jquery_ajax_test),
]
views.py
from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
return render(request, ‘ajax_jquery.html‘)
# Jquery --> ajax
def jquery_ajax_test(request):
print(‘request.GET‘, request.GET)
func = request.GET.get(‘callback‘, None)
print(‘func;‘, func)
return HttpResponse("%s(‘world 2020‘)" % func)
頁面顯示：
getJSON之使用自定義的函數名--實例：
settigs.py：
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)], # 設置templates的路徑為Django以前版本
# ‘DIRS‘: [], # 註釋掉該行，此為Django 2.0.1最新版本
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
...省略默認配置
STATIC_URL = ‘/static/‘
TEMPLATE_DIRS = (os.path.join(BASE_DIR, ‘templates‘),) # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 現添加的配置,這裏是元組，註意逗號
templates/ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
$.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
console.log("successfully, hello " + arg)
});
</script>
</html>
mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Jquery_Ajax
url(r‘ajax-jquery/‘, views.ajax_jquery),
# jquery_ajax_test
url(r‘jquery_ajax_test/‘, views.jquery_ajax_test),
]
views.py
from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
return render(request, ‘ajax_jquery.html‘)
# Jquery --> ajax
def jquery_ajax_test(request):
print(‘request.GET‘, request.GET)
func = request.GET.get(‘callback‘, None)
print(‘func;‘, func)
return HttpResponse("%s(‘world 2020‘)" % func)
頁面顯示：
.ajax 跨域請求之指定函數
settigs.py：
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)], # 設置templates的路徑為Django以前版本
# ‘DIRS‘: [], # 註釋掉該行，此為Django 2.0.1最新版本
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
...省略默認配置
STATIC_URL = ‘/static/‘
TEMPLATE_DIRS = (os.path.join(BASE_DIR, ‘templates‘),) # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 現添加的配置,這裏是元組，註意逗號
templates/ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
function SayHi() {
console.log("hello, json")
}
function f() {
$.ajax({
url:"http://127.0.0.1:8081/jquery_ajax_test",
dataType:"jsonp",
jsonp: ‘callback‘,
jsonpCallback:"SayHi"
});
}
</script>
</html>
mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Jquery_Ajax
url(r‘ajax-jquery/‘, views.ajax_jquery),
# jquery_ajax_test
url(r‘jquery_ajax_test/‘, views.jquery_ajax_test),
]
views.py
from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
return render(request, ‘ajax_jquery.html‘)
# Jquery --> ajax
def jquery_ajax_test(request):
print(‘request.GET‘, request.GET)
func = request.GET.get(‘callback‘, None)
return HttpResponse("%s(‘world 2020‘)" % func) # func為[]，因為根本不需要調用，前臺已定義好
頁面顯示：
Python學習---JSONP學習180130