Ajax
Ajax簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。javascript
- 同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。
- AJAX局部刷新
jQuery實現的ajax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script>
//.shadow{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: black;opacity: 0.4;z-index: 999;}
$(
"#m_add_ok"
).click(
function
(){
$.ajax({
url:
'/m_user_add/'
,
// 要提交的地址
type:
'POST'
,
// GET或POST,提交方式
//dataType:'JSON',
data: {
// 提交的數據
'name'
: $(
"#m_add_box input[name='name']"
).val(),
'gender'
:$(
"#m_add_box input[name='gender']:checked"
).val(),
'email'
:$(
"#m_add_box input[name='email']"
).val(),
'depart_id'
:$(
"#m_add_box select[name='depart_id']"
).val()
},
success:
function
(data){
// 當服務端處理完成後，返回數據時，該函數自動調用
// data=服務端返回的值 默認是字符串
// console.log(data);
// JSON.parse(字符串) => 對象
// JSON.stringify(對象) => 字符串
var
data=JSON.parse(data)
//若是上面寫了dataType:'JSON' 就至關於把success函數的參數data字符串轉化成json對象，這就不須要寫了json.parse(data)
if
(data.status){
location.reload();
// location.href='/user_list/';
}
else
{
$(
'#titlemsg'
).text(data.titlemsg);
}
}
})
});
</script>
|
1、jQuery.ajax()
一、請求參數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
######################------------data---------################
data: 當前ajax請求要攜帶的數據，是一個json的
object
對象，ajax方法就會默認地把它編碼成某種格式
(urlencoded:?a
=
1
&b
=
2
)發送給服務端；此外，ajax默認以get方式發送請求。
function testData() {
$.ajax(
"/test"
,{
/
/
此時的data是一個json形式的對象
data:{
a:
1
,
b:
2
}
});
/
/
?a
=
1
&b
=
2
######################------------processData---------################
processData：聲明當前的data數據是否進行轉碼或預處理，默認爲true，即預處理；
if
爲false，
那麼對data：{a:
1
,b:
2
}會調用json對象的toString()方法，即{a:
1
,b:
2
}.toString()
,最後獲得一個［
object
，
Object
］形式的結果。
######################------------contentType---------################
contentType：默認值:
"application/x-www-form-urlencoded"
。發送信息至服務器時內容編碼類型。
用來指明當前請求的數據編碼格式；urlencoded:?a
=
1
&b
=
2
；若是想以其餘方式提交數據，
好比contentType:
"application/json"
，即向服務器發送一個json字符串：
$.ajax(
"/ajax_get"
,{
data:JSON.stringify({
a:
22
,
b:
33
}),
contentType:
"application/json"
,
type
:
"POST"
,
});
/
/
{a:
22
, b:
33
}
注意：contentType:
"application/json"
一旦設定，data必須是json字符串，不能是json對象
views.py: json.loads(request.body.decode(
"utf8"
))
######################------------traditional---------################
traditional：通常是咱們的data數據有數組時會用到 ：data:{a:
22
,b:
33
,c:[
"x"
,
"y"
]},
traditional爲false會對數據進行深層次迭代；
|
二、響應參數
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/*
dataType： 預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析後，傳遞給回調函數。
默認不須要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換；
好比咱們的服務器響應的content Type爲json格式，這時ajax方法就會對響應的內容
進行一個json格式的轉換，if轉換成功，咱們在success的回調函數裏就會獲得一個json格式
的對象；轉換失敗就會觸發error這個回調函數。若是咱們明確地指定目標類型，就可使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
見下dataType實例
*/
|
2、jQuery.serialize()
該函數主要根據用於提交的有效表單控件的name和value，將它們拼接爲一個可直接用於表單提交的文本字符串，該字符串已通過標準的URL編碼處理(字符集編碼爲UTF-8)。css
- jQuery 1.0 新增該函數。語法：jQueryObject.serialize()
- 返回值：serialize()函數的返回值爲String類型，返回將表單元素編碼後的可用於表單提交的文本字符串。
- 不在
- serialize()函數一般用於將表單內容序列化，以便經過AJAX方式提交。
- serialize()函數用於序列化全部表單元素。$("form").serialize()
- serialize()函數用於序列化部分表單元素。$(":text, select, :checkbox").serialize()
def ajax_login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
import json
ret = {'status': True,'msg': None}
obj = LoginForm(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
else:
# print(obj.errors) # obj.errors對象
ret['status'] = False
ret['msg'] = obj.errors
v = json.dumps(ret)
return HttpResponse(v)
<body>
<h1>用戶登陸</h1>
<form id="f1" >
{% csrf_token %}
<p>
<input type="text" name="user" />
</p>
<p>
<input type="password" name="pwd" />
</p>
<a onclick="submitForm();">提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function submitForm(){
$('.c1').remove();
$.ajax({
url: '/ajax_login/',
type: 'POST',
data: $('#f1').serialize(),// user=alex&pwd=456&csrftoen=dfdf\
dataType:"JSON",
success:function(arg){
console.log(arg);
if(arg.status){
}else{
$.each(arg.msg,function(index,value){
console.log(index,value);
var tag = document.createElement('span');
tag.innerHTML = value[0];
tag.className = 'c1';
$('#f1').find('input[name="'+ index +'"]').after(tag);
})
}
}
})
}
</script>
</body>
csrf跨站請求僞造
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<body>
<!--
{% csrf_token %} 生成input框
{{ csrf_token }} 生成隨機字符串
-->
<form method=
"POST"
action=
"/csrf1.html"
>
{% csrf_token %}
<input id=
"user"
type=
"text"
name=
"user"
/>
<input type=
"submit"
value=
"提交"
/>
<a id=
"a_sub"
>Ajax提交</a>
</form>
<script src=
"/static/jquery-1.12.4.js"
></script>
<script>
$(
"#a_sub"
).click(
function
(){
var
user = $(
'#user'
).val();
$.ajax({
url:
'/csrf1.html'
,
type:
'POST'
,
//方式1：
data: {
"user"
:user,
'csrfmiddlewaretoken'
: $(
"[name='csrfmiddlewaretoken']"
).val()},
//方式2：
// data: { "user":user,'csrfmiddlewaretoken': '{{ csrf_token }}'},
success:
function
(arg){
console.log(arg);
}
})
});
</script>
<script src=
"/static/jquery.cookie.js"
></script>
<script>
$(
"#a_sub"
).click(
function
(){
var
user = $(
'#user'
).val();
$.ajax({
url:
'/csrf1.html'
,
//方式3：放在請求頭中
headers:{
'X-CSRFToken'
: $.cookie(
'csrftoken'
)},
type:
'POST'
,
data: {
"user"
:user},
success:
function
(arg){
console.log(arg);
}
})
});
</script>
</body>
|
stringify與parse方法
|
1
2
3
4
5
6
7
8
|
JSON.parse(): 用於將一個 JSON 字符串轉換爲 JavaScript 對象
eg:
console.log(JSON.parse(
'{"name":"tom"}'
));
console.log(JSON.parse(
'{name:"tom"}'
)) ;
// 錯誤
console.log(JSON.parse(
'[12,undefined]'
)) ;
// 錯誤
JSON.stringify(): 用於將 JavaScript 值轉換爲 JSON 字符串。
eg: console.log(JSON.stringify({
'name'
:
"tom"
}));
|
上傳文件
1、Ajax(FormData)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.avatar_con {
height: 100px;
width: 100px;
position: relative;
}
.avatar_con iframe {
display: none
}
.avatar_con img {
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
max-height: 100px;
}
.avatar_con #previewImg {
border-radius: 50%;
border: 1px solid #dddddd;
padding: 3px;
height: 96px;
width: 96px;
}
.avatar_con #avatarImg {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
position: absolute;
z-index: 102;
}
.avatar-avatar_con .text {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
</style>
<body>
<h1>jQuery Ajax上傳文件</h1>
<div class="avatar_con">
<label for="avatar">
<img id="previewImg" src="/media/avatar/default.png">
<div class="text">點擊圖片更換</div>
</label>
<input id="avatarImg" name="avatar" type="file"/>
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function () {
bindChangeAvatar();
});
// ajax上傳文件
function bindChangeAvatar() {
$('#avatarImg').change(function () {
/*
// 頭像預覽 方法1:
// 獲取用戶選中的文件對象
var file_obj = $(this)[0].files[0];
// 獲取文件對象的路徑
var reader = new FileReader();
reader.readAsDataURL(file_obj);
// 修改img的src屬性 ，src=文件對象的路徑
reader.onload = function () {
$("#previewImg").attr("src", reader.result)
};
*/
/* 本地上傳預覽 方法2:
var obj = $(this)[0].files[0];
// Ajax發送後臺，並獲取路徑
// img.src = 獲取路徑
var v = window.URL.createObjectURL(obj);
$('#previewImg').attr('src',v);
$('#previewImg').load(function(){
window.URL.revokeObjectURL(v);
});
*/
/*
本地上傳預覽 方法3: Ajax上傳
*/
var formdata=new FormData();
formdata.append("avatar",$("#avatarImg")[0].files[0]);
formdata.append("csrfmiddlewaretoken","{{ csrf_token }}"); //csrf
$.ajax({
url:"", //不填寫就是當前 /upload/
type:"post",
contentType:false, // 用formdata的時候須要設置
processData:false, // 用formdata的時候須要設置
data:formdata,
success:function(arg){
arg = JSON.parse(arg);
if (arg.status) {
console.log(arg.data);
// 頭像預覽 方法3:
$('#previewImg').attr('src', '/' + arg.data);
}
}
})
})
}
</script>
</body>
</html>
2、僞Ajax上傳文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.avatar_con {
height: 100px;
width: 100px;
position: relative;
}
.avatar_con iframe {
display: none
}
.avatar_con img {
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
max-height: 100px;
}
.avatar_con #previewImg {
border-radius: 50%;
border: 1px solid #dddddd;
padding: 3px;
height: 96px;
width: 96px;
}
.avatar_con #avatarImg {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
position: absolute;
z-index: 102;
}
.avatar-avatar_con .text {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
</style>
<body>
<h1>僞 Ajax上傳文件</h1>
<div class="avatar_con">
<iframe id="upload_iframe" name="upload_iframe"></iframe>
<form method="POST" action="/upload/" enctype="multipart/form-data" target="upload_iframe">
<!--target和iframe的name 進行關聯-->
<!--別忘了 編碼格式 enctype="multipart/form-data"-->
{% csrf_token %}
<img id="previewImg" src="/media/avatar/default.png">
<div class="text">點擊圖片更換</div>
<input id="avatarImg" name="avatar" type="file"/>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function () {
bindChangeAvatar();
});
function bindChangeAvatar() {
$('#avatarImg').change(function () {
$(this).parent().submit();
$('#upload_iframe').load(function () {
var con = this.contentWindow.document.body.innerText;
con = JSON.parse(con);
if (con.status) {
console.log(con.data);
$('#previewImg').attr('src', '/' + con.data);
}
})
})
}
</script>
</body>
</html>
3、原生Ajax上傳文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.avatar_con {
height: 100px;
width: 100px;
position: relative;
}
.avatar_con iframe {
display: none
}
.avatar_con img {
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
max-height: 100px;
}
.avatar_con #previewImg {
border-radius: 50%;
border: 1px solid #dddddd;
padding: 3px;
height: 96px;
width: 96px;
}
.avatar_con #avatarImg {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
position: absolute;
z-index: 102;
}
.avatar-avatar_con .text {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
</style>
<body>
<h1>原生Ajax上傳文件</h1>
<div class="avatar_con">
<label for="avatar">
<img id="previewImg" src="/media/avatar/default.png">
<div class="text">點擊圖片更換</div>
</label>
<input onchange="bindChangeAvatar()" id="avatarImg" name="avatar" type="file"/>
</div>
<script>
function bindChangeAvatar(){
var formdata = new FormData();
formdata.append("avatar",document.getElementById('avatarImg').files[0]);
formdata.append("csrfmiddlewaretoken","{{ csrf_token }}"); //csrf
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var arg = JSON.parse(xhr.responseText);
document.getElementById('previewImg').src='/' + arg.data
}
};
xhr.open('POST','/upload/');
/*xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
發post請求必須設置Content-Type，request.POST纔有數據，而且已轉換成字典，
否則就要去request.body中取值仍是字節 b'a=1&b=2'
若是發送的是formdata 則不須要設置
*/
xhr.send(formdata);
}
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>首頁</h1> <input type="text" id="i1" /> + <input type="text" id="i2" /> = <input type="text" id="i3" /> <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();" /> <input type="button" id="btn2" value="原生Ajax" onclick="add2();" /> <script src="/static/jquery-1.12.4.js"></script> <script> function add1(){ $.ajax({ url: '/add1/', type: 'POST', data: {'i1': $('#i1').val(),'i2': $('#i2').val()}, success:function(arg){ $('#i3').val(arg); } }) } function add2(){ /* var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } }; xhr.open('GET','/add2/?i1=12&i2=19'); xhr.send(); */ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } }; xhr.open('POST','/add2/'); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*發post請求必須設置Content-Type，request.POST纔有數據，而且已轉換成字典，否則就要去request.body中取值仍是字節 b'a=1&b=2' * 若是發送的是formdata 則不須要設置 * */ xhr.send("i1=12&i2=19"); } </script> </body> </html>
4、服務端處理上傳文件
# 配置文件：
# 與用戶上傳相關的配置
MEDIA_ROOT= os.path.join(BASE_DIR, "media")
MEDIA_URL = "/media/"
# 路由中:
from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings
from app01 import views
urlpatterns = [
# media配置:
re_path(r"media/(?P<path>.*)$", serve, {"document_root": settings.MEDIA_ROOT}),
# 文本編輯器上傳圖片url
path('upload/', views.upload),
]
# 視圖中：
import os
import time
def upload(request):
ret = {'status': False, 'data': None, }
if request.method == 'POST':
# print(request.body) # 請求報文中的請求體 b'a=1&b=2'
# print(request.POST) # if contentType==urlencoded ,request.POST纔有數據
# print(request.FILES) #文件都在這下面
file_obj = request.FILES.get('avatar') #文件對象
file_obj.name = "%s%s" % (time.time(), file_obj.name)
file_dir = 'media%savatar' % (os.sep)
if not os.path.exists(file_dir):
os.makedirs(file_dir)
file_path = os.path.join("media", "avatar", file_obj.name)
with open(file_path, 'wb') as f:
for line in file_obj:
f.write(line)
ret['status'] = True
ret['data'] = file_path
# cur_nid = request.session['user_info'].get('nid')
# row = models.UserInfo.objects.filter(nid=cur_nid).update(avatar='/%s'%(file_path))
# request.session['user_info']['avatar']='/%s'%(file_path)
return HttpResponse(json.dumps(ret))
return render(request, "upload.html")
5、models.py
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
from
django.db
import
models
from
django.contrib.auth.models
import
AbstractUser
class
UserInfo(AbstractUser):
"""
用戶信息
"""
nid
=
models.AutoField(primary_key
=
True
)
telephone
=
models.CharField(max_length
=
11
, null
=
True
, unique
=
True
)
avatar
=
models.FileField(upload_to
=
'avatars/'
, default
=
"avatars/default.png"
)
create_time
=
models.DateTimeField(verbose_name
=
'建立時間'
, auto_now_add
=
True
)
blog
=
models.OneToOneField(to
=
'Blog'
, to_field
=
'nid'
, null
=
True
, on_delete
=
models.CASCADE)
def
__str__(
self
):
return
self
.username
class
Meta:
verbose_name
=
'用戶信息'
verbose_name_plural
=
'用戶信息'
|
6、帶form驗證
"""
Myforms.py中：
from django import forms
class UploadFileForm(forms.Form):
title = forms.CharField(max_length=32)
avatar = forms.FileField()
視圖中：
import os
import time
from .Myforms import UploadFileForm
def upload(request):
if request.method == 'POST':
# form = UploadFileForm(data = request.POST, files = request.FILES) # 注意獲取數據的方式
form = UploadFileForm(request.POST, request.FILES) # 注意獲取數據的方式
if form.is_valid():
file_obj = request.FILES.get('avatar')
file_obj.name = "%s%s" % (time.time(), file_obj.name)
file_dir = 'media%savatar' % (os.sep)
if not os.path.exists(file_dir):
os.makedirs(file_dir)
file_path = os.path.join("media", "avatar", file_obj.name)
with open(file_path, 'wb') as f:
for line in file_obj:
f.write(line)
# cur_nid = request.session['user_info'].get('nid')
# row = models.UserInfo.objects.filter(nid=cur_nid).update(avatar='/%s'%(file_path))
# request.session['user_info']['avatar']='/%s'%(file_path)
return redirect('/')
else:
return render(request, "upload.html", locals())
form = UploadFileForm()
return render(request, "upload.html",{'form': form})
模板中：
<form method="POST" action="/upload/" enctype="multipart/form-data">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }} <span class="pull-right error">{{ field.errors.0 }}</span>
</div>
{% endfor %}
<input type="submit" class="btn btn-default" value="提交"/>
</form>
"""
瀏覽器的同源策略
- 跨域是由於瀏覽器的同源策略致使的，也就是說瀏覽器會阻止非同源的請求
- 域名不一樣或者端口不一樣都屬於非同源的
- 瀏覽器只阻止表單以及ajax請求，並不會阻止src請求，因此cnd，圖片等src請求均可以發
解決跨域
方式一：CORS跨域請求
- CORS即Cross Origin Resource Sharing 跨域資源共享
- 隨着技術的發展，如今的瀏覽器能夠支持主動設置從而容許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器容許跨域請求。
- 跨域請求還分爲兩種，一種叫簡單請求，一種是複雜請求
一、簡單請求
- HTTP方法是下列方法之一 : HEAD， GET，POST
- HTTP頭信息不超出如下幾種字段 : Accept， Accept-Language， Content-Language， Last-Event-ID , Content-Type
- 其中Content-Type只能是下列類型中的一個 : application/x-www-from-urlencoded ， multipart/form-data ， text/plain
- 簡單請求：一次請求
- 簡單請求：服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'
二、複雜請求
- 任何一個不知足上述要求的請求，即會被認爲是複雜請求
- 複雜請求:兩次請求，在發送數據以前會先發一次請求用作「預檢」，OPTIONS請求,只有「預檢」經過後纔再發送一次請求用於數據傳輸。
三、關於「預檢」
- 請求方式：OPTIONS
- 「預檢」其實作檢查，檢查若是經過則容許傳輸數據，檢查不經過則再也不發送真正想要發送的消息
四、如何「預檢」
- 若是複雜請求是PUT等請求，則服務端須要設置容許某請求，不然「預檢」不經過 Access-Control-Request-Method
- 若是複雜請求設置了請求頭，則服務端須要設置容許某請求頭，不然「預檢」不經過 Access-Control-Request-Headers
五、ContentType
- 請求頭ContentType指的是請求體的編碼類型，常見的類型共有3種：
- application/x-www-form-urlencoded 這應該是最多見的 POST 提交數據的方式了。瀏覽器的原生表單，若是不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。
- multipart/form-data 這又是一個常見的 POST 數據提交的方式。咱們使用表單上傳文件時，必須讓表單的 enctype 等於 multipart/form-data。
- application/json 用來告訴服務端消息主體是序列化後的 JSON 字符串。
方式二：Jsonp
- Jsonp的實現原理是根據瀏覽器不阻止src請求來實現的，經過script標籤的跨域特性來繞過同源策略。
- JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。
- JsonP解決跨域只能發送get請求，而且實現起來須要先後端交互比較多。
- 若是報錯ALLOWED_HOSTS 須要在settings.py 中配置須要訪問的域名 ALLOWED_HOSTS = ['http://www.s4.com']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
<div id="container"></div>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AjaxRequest() {
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
success: function (data) {
$.each(data.data,function(i){
var item = data.data[i];
var str = "<p>"+ item.week +"</p>";
$('#container').append(str);
$.each(item.list,function(j){
var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
$('#container').append(temp);
});
$('#container').append("<hr/>");
})
}
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="獲取用戶列表" onclick="getUsers();" />
<ul id="user_list">
</ul>
<script src="/static/jquery-1.12.4.js"></script>
<script>
/*
function getUsers(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var content = xhr.responseText;
console.log(content);
}
};
xhr.open('GET','http://www.s4.com:8001/users/');
xhr.send();
}
*/
//a = ['alex','eric','egon']
/*
function getUsers(){
var tag = document.createElement('script');
tag.src = "http://www.s4.com:8001/users/?callback=bbb?sdd";
document.head.appendChild(tag);
}
function bbb(arg){
console.log(arg);
}
*/
function getUsers(){
// XMLHttpRequest
/*
$.ajax({
url: 'http://www.s4.com:8001/users/?callback=bbb',
type: 'GET',
success:function(arg){
console.log(arg);
}
})
*/
// JSONP
$.ajax({
url: 'http://www.s4.com:8001/users/',
type: 'GET',
dataType: 'JSONP',
jsonp: 'callback',
jsonpCallback: 'bbb'
})
}
function bbb(arg){
console.log(arg);
}
</script>
</body>
</html>
import json from django.shortcuts import render,HttpResponse from django.core.handlers.wsgi import WSGIRequest from django.views import View def users(request): v = request.GET.get('callback') print('請求來了...') user_list = [ 'alex','eric','egon' ] user_list_str = json.dumps(user_list) temp = "%s(%s)" %(v,user_list_str,) print(temp) return HttpResponse(temp) def new_users(request): print(request.method) if request.method == "OPTIONS": obj = HttpResponse() obj['Access-Control-Allow-Origin'] = "*" obj['Access-Control-Allow-Methods'] = "DELETE" return obj obj = HttpResponse('asdfasdf') obj['Access-Control-Allow-Origin'] = "*" return obj # user_list = [ # 'alex','eric','egon' # ] # user_list_str = json.dumps(user_list) # obj = HttpResponse(user_list_str) # # obj['Access-Control-Allow-Origin'] = "*" # return obj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="獲取用戶列表" onclick="getUsers();" />
<ul id="user_list">
</ul>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function getUsers(){
$.ajax({
url: 'http://www.s4.com:8001/new_users/',
type:"DELETE",
success:function(arg){
console.log(arg);
}
})
}
</script>
</body>
</html>
<button id="btn_one">點擊我向JsonP1發送請求</button>
<script>
// 測試發送請求失敗 跨域不能獲得數據
$('#btn_one').click(function () {
$.ajax({
url: "http://127.0.0.1:8000/jsonp1",
type: "get",
success: function (response) {
console.log(response)
}
})
});
function handlerResponse(response) {
alert(response)
};
window.onload = function () {
$("#btn_one").click(function () {
let script_ele = document.createElement("script");
script_ele.src = "http://127.0.0.1:8000/jsonp1?callback=handlerResponse";
document.body.insertBefore(script_ele, document.body.firstChild);
})
}
</script>
class Test(APIView): def get(self, request): callback = request.query_params.get("callback", "") ret = callback + "(" + "'success'" + ")" return HttpResponse(ret)
添加響應頭
from django.middleware.security import SecurityMiddleware from django.utils.deprecation import MiddlewareMixin class MyCors(MiddlewareMixin): def process_response(self, request, response): response["Access-Control-Allow-Origin"] = "*" if request.method == "OPTIONS": response["Access-Control-Allow-Methods"] = "PUT, DELETE" response["Access-Control-Allow-Headers"] = "content-type" return response
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'middlewares.MyCors', ]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script> </head> <body> <div id="app"> </div> <script> const app = new Vue({ el: "#app", mounted(){ axios.request({ url: "http://127.0.0.1:8000/demo/", method: "POST", data: { "name": "Alex" } }).then(function (data) { console.log(data) }) } }) </script> </body> </html>
基於cors實現AJAX請求
簡單請求 OR 非簡單請求 條件： 1、請求方式：HEAD、GET、POST 2、請求頭信息： Accept Accept-Language Content-Language Last-Event-ID Content-Type 對應的值是如下三個中的任意一個 application/x-www-form-urlencoded multipart/form-data text/plain 注意：同時知足以上兩個條件時，則是簡單請求，不然爲複雜請求 簡單請求和非簡單請求的區別？ 簡單請求：一次請求 非簡單請求：兩次請求，在發送數據以前會先發一次請求用於作「預檢」，只有「預檢」經過後纔再發送一次請求用於數據傳輸。 關於「預檢」 - 請求方式：OPTIONS - 「預檢」其實作檢查，檢查若是經過則容許傳輸數據，檢查不經過則再也不發送真正想要發送的消息 - 如何「預檢」 => 若是複雜請求是PUT等請求，則服務端須要設置容許某請求，不然「預檢」不經過 Access-Control-Request-Method => 若是複雜請求設置了請求頭，則服務端須要設置容許某請求頭，不然「預檢」不經過 Access-Control-Request-Headers
a、支持跨域，簡單請求html
服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'前端
HTML
Torando
b、支持跨域，複雜請求vue
因爲複雜請求時，首先會發送「預檢」請求，若是「預檢」成功，則發送真實數據。java
- 「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Request-Method
- 「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
- 「預檢」緩存時間，服務器設置響應頭：Access-Control-Max-Age
HTML
Tornado
c、跨域獲取響應頭python
默認獲取到的全部響應頭只有基本信息，若是想要獲取自定義的響應頭，則須要再服務器端設置Access-Control-Expose-Headers。jquery
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="submit" onclick="XmlSendRequest();" /> </p> <p> <input type="submit" onclick="JqSendRequest();" /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function XmlSendRequest(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { var result = xhr.responseText; console.log(result); // 獲取響應頭 console.log(xhr.getAllResponseHeaders()); } }; xhr.open('PUT', "http://c2.com:8000/test/", true); xhr.setRequestHeader('k1', 'v1'); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", type: 'PUT', dataType: 'text', headers: {'k1': 'v1'}, success: function(data, statusText, xmlHttpRequest){ console.log(data); // 獲取響應頭 console.log(xmlHttpRequest.getAllResponseHeaders()); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.set_header('xxoo', "seven") self.set_header('bili', "daobidao") self.set_header('Access-Control-Expose-Headers', "xxoo,bili") self.write('{"status": true, "data": "seven"}') def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com") self.set_header('Access-Control-Allow-Headers', "k1,k2") self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") self.set_header('Access-Control-Max-Age', 10)
d、跨域傳輸cookieios
在跨域請求中，默認狀況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書不管在預檢請求中或是在實際請求都是不會被髮送。web
若是想要發送：
- 瀏覽器端：XMLHttpRequest的withCredentials爲true
- 服務器端：Access-Control-Allow-Credentials爲true
- 注意：服務器端響應的 Access-Control-Allow-Origin 不能是通配符 *
HTML
Tornado
相關文章
- 1. Ajax(Jq Ajax JQ Ajax原理）
- 2. ajax （ajax開發）
- 3. AJAX—AJAX基礎
- 4. ajax（ajax開發）
- 5. 【Ajax】Ajax總結
- 6. ajax嵌套ajax
- 7. jQuery中Ajax $.ajax等
- 8. JS Ajax 與 JQuery Ajax
- 9. ajax使用 ajax+json
- 10. Ajax（一）—— 初始Ajax
- 更多相關文章...
- • AJAX 簡介 - PHP教程
- • PHP - AJAX 與 PHP - PHP教程
- • PHP Ajax 跨域問題最佳解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Ajax(Jq Ajax JQ Ajax原理）
- 2. ajax （ajax開發）
- 3. AJAX—AJAX基礎
- 4. ajax（ajax開發）
- 5. 【Ajax】Ajax總結
- 6. ajax嵌套ajax
- 7. jQuery中Ajax $.ajax等
- 8. JS Ajax 與 JQuery Ajax
- 9. ajax使用 ajax+json
- 10. Ajax（一）—— 初始Ajax