urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^test/$', views.test, name='test'),
url(r'^ajax_test/', views.ajax_test, name='ajax_test'),
]
```javascript
template-ajax_test.html
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="a1">
<input type="file" id="a2">
<input type="button" value="點擊" onclick="ajax1()">
</body>
<script src="/static/jquery.js"></script>
<script type="text/javascript">
function getXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function ajax1(){
var a1 = document.getElementById('a1').value; #獲取input的值
var fileobj = document.getElementById('a2').files[0];
var fd = new FormData();
fd.append('user', a1);
fd.append('img', fileobj);
//var xhr = new XMLHttpRequest();
var xhr = new getXHR();
xhr.open('POST' ,'/ajax_test/', true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
************************************************************
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
//xhr.send("user=root/pass=123"); #如果send傳字符串，必須加上面的請求頭, 如果傳對象借助FormData,且不用加請求頭
***********************************************************
xhr.send(fd);
}
</script>
</html>
views.py
def test(request):
return render(request, 'ajax_test.html')
def ajax_test(request):
res = {'status': True, 'data': 'ok'}
if request.method == 'POST':
print request.POST.get('user')
img = request.FILES.get('img')
import os
file_path = os.path.join('static', img.name) 拼接成 static/xx.jpg
with open(file_path, 'wb') as f:
for i in img.chunks():
f.write(i)
***********************************************************
import json
return HttpResponse(json.dumps(res))
************************************************************
1.原生XMLHttpRequest傳送數(shù)據(jù),send()發(fā)送的是字符串,而且必須使用setRequestHeader設(shè)置信息請求頭.
2.FormData對象介質(zhì)傳送數(shù)據(jù),通過append將(可以看為元組信息)信息傳入,然后send(),但send對象為form對象,此種方式不需要設(shè)置信息請求頭.
3.特別需要注意的一點:如果使用GET方式,需要設(shè)置URL,字符串方式.
