AJAX與文件上傳
阿新 • • 發佈：2019-01-09
20px ipa 進行 UNC def request blur length 輸入數據 
一、ajax
ajax（Asynchronous JavaScript And XML）：異步JavaScript和XML，即使用JavaScript語句與服務器進行異步交互，傳輸的數據為XML（也可以是json數據）。實際上就是在JavaScript語句裏用ajax可以向服務器發送請求。
兩大特點：
1，異步交互
2，頁面局部刷新
語法：
基於jQuery：
<script>
$(‘.cc‘).click(function(){ #當我們點擊‘.cc’這個類的時候就會觸發ajax請求 $.ajax({ url:‘/name/‘, #請求的路徑 type:‘post‘, #請求的方式 data:{csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val(),user:$(‘[name="user"]‘).val()}, #請求的數據 success:function (data) { #這是請求成功後的回調函數 if (data.name){ $(‘.c1‘).html(‘用戶名已存在‘); $(‘.login‘).addClass(‘hide‘) } } }) }); </script>
1，基於ajax請求的註冊頁面
1.1 register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/js/bootstrap.js"></script>
</head>
<body>
{% csrf_token %}
<div class="container">
{% csrf_token %}
<div class="row">
<div class="col-md-5">
<div style="color: blue;font-size: 20px">註冊頁面</div>
<div>
名字 <input type="text" name="user" class="form-control"><span class="c1" style="color: red"></span>
</div>
<div >
密碼 <input type="password" name="pwd" class="form-control"><span class="c2" style="color: red"></span>
</div>
<button class="register">註冊</button>
</div>
</div>
</div>
<script>
$(‘[name="user"]‘).focus(function () {
$(‘.c1‘).html(‘‘);
$(‘.register‘).removeClass(‘hide‘)
});
$(‘[name="pwd"]‘).focus(function () {
$(‘.c2‘).html(‘‘);
$(‘.register‘).removeClass(‘hide‘)
});
$(‘[name="user"]‘).blur(function () {
$.ajax({
url:‘/name/‘,
type:‘post‘,
data:{csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val(),user:$(‘[name="user"]‘).val()},
success:function (data) {
if (data.name){
$(‘.c1‘).html(‘用戶名已存在‘);
$(‘.register‘).addClass(‘hide‘)
}
}
})
});
$(‘[name="pwd"]‘).blur(function () {
var pwd=$(this).val();
if (pwd.length < 10){
$(‘.c2‘).html(‘長度小於10‘);
$(‘.register‘).addClass(‘hide‘)
}
});
$(‘.register‘).click(function () {
var name = $(‘[name="user"]‘).val();
var pw = $(‘[name="pwd"]‘).val();
$.ajax({
url: ‘/registr/‘,
type: ‘post‘,
data: {csrfmiddlewaretoken: $(‘[name="csrfmiddlewaretoken"]‘).val(), user: name, pwd: pw},
success: function (data) {
if (data.state) {
location.href = ‘/login/‘
}
else {
$(‘p‘).html(‘註冊不成功‘)
}
}
})
})
</script>
</body>
1.2 views.py
def registr(request):
if request.method==‘GET‘:
return render(request, ‘registr.html‘)
else:
dic={‘state‘:None}
name=request.POST.get(‘user‘)
pwd=request.POST.get(‘pwd‘)
obj=UserInfo.objects.create(name=name,pwd=pwd)
if obj:
dic[‘state‘]=True
return JsonResponse(dic)
def name(request):
dic={‘name‘:None}
name=request.POST.get(‘user‘)
obj=UserInfo.objects.filter(name=name).first()
if obj :
dic[‘name‘]=True
return JsonResponse(dic)
1.3 呈現出來的頁面
當我們在名字欄輸入數據後並且失去焦點後，就會觸發一個ajax請求，它會把寫在名字欄的數據發到服務器，服務器從數據庫判斷是否用戶名已經存在，然後給ajax返回一個結果。這整個過程中，頁面是不會刷新的。只是通過JavaScript在頁面上添加節點而已
二、文件上傳
1,請求頭contentType：指的請求體的打包方式，總共有三種類型
1.1 application/x-www-form-urlencoded
這是post請求方式最常見的打包方式，如果不進行設置，都會默認這種打包方式。瀏覽器的原生form表單，如果不設置enctype屬性，就默認這種方式打包數據。
user=alex&pwd=123 這就是這種方式打包後的數據結構
1.2 multipart/from-data
基於form表單上傳文件，就必須讓form表單的enctype等於multipart/form-data
基於ajax上傳文件時，我們就要用到Formdata類
$(‘.submit‘).click(function () {
var formdata=new FormData();
formdata.append(‘file‘,$(‘.file‘)[0].files[0]); #插入上傳文件的內容
$.ajax({
url:‘/file/‘,
type:‘post‘,
contentType:false, #這一句和下一句是必須加上的
processData:false,
data:formdata,
success:function (data) {
$(‘.c1‘).html(data)
}
})
})
1.3 application/json
在用ajax請求時，可以把contentType改成json，但此時的數據類型就必須json數據類型
如果不用Json類型打包的話，ajax也會默認urlencoded模式打包，數據書寫格式為：
data：{user:‘hh‘,pwd:123}
但當設置contentType=‘json‘，此時數據打包方式就變了，數據必須是json格式，所以現在該如下面這樣寫
data：JSON.strinigfy({user:‘hh‘,pwd:123})
2，基於form表單的文件上傳
2.1 HTML文件
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<input type="submit">
</form>
2.2 視圖
def file(request):
if request.method==‘GET‘:
return render(request,‘file.html‘)
else:
file_obj=request.FILES.get(‘file‘)
name=file_obj.name
with open(os.path.join(‘imgs‘,name),‘wb‘) as f:
for line in file_obj:
f.write(line)
return HttpResponse(‘上傳成功‘)
3，基於ajax的文件上傳
3.1 HTML文件
<input type="file" class="file">
<input type="button" class="submit" value="submit">
<p class="c1"></p>
<script>
$(‘.submit‘).click(function () {
var formdata=new FormData();
formdata.append(‘file‘,$(‘.file‘)[0].files[0]);
$.ajax({
url:‘/file/‘,
type:‘post‘,
contentType:false,
processData:false,
data:formdata,
success:function (data) {
$(‘.c1‘).html(data)
}
})
})
</script>
3.2 視圖
def file(request):
if request.method==‘GET‘:
return render(request,‘file.html‘)
else:
file_obj=request.FILES.get(‘file‘)
name=file_obj.name
with open(os.path.join(‘imgs‘,name),‘wb‘) as f:
for line in file_obj:
f.write(line)
return HttpResponse(‘上傳成功‘)
AJAX與文件上傳