目錄
- 前后端傳輸數(shù)據(jù)的編碼格式
- Ajax提交urlencoded格式數(shù)據(jù)
- Ajax通過(guò)FormData上傳文件
- Ajax提交Json格式數(shù)據(jù)
- Ajax發(fā)送POST請(qǐng)求時(shí)如何通過(guò)CSRF認(rèn)證
- Django Ajax案例1：聯(lián)動(dòng)下例菜單
- Django Ajax案例2：Ajax上傳文件
前后端傳輸數(shù)據(jù)的編碼格式
前后端傳輸數(shù)據(jù)的編碼格式主要有三種, 本文接下來(lái)將詳細(xì)演示。
Ajax提交urlencoded格式數(shù)據(jù)
Ajax給后臺(tái)發(fā)送數(shù)據(jù)的默認(rèn)編碼格式是urlencoded，比如username=abcdepassword=123456的形式。Django后端拿到符合urlencoded編碼格式的數(shù)據(jù)都會(huì)自動(dòng)幫你解析分裝到request.POST中,與form表單提交的數(shù)據(jù)相同。
下面兩種方式是等同的。
//手動(dòng)構(gòu)造數(shù)據(jù)data
$("#btnSubmit").click(function () {
$.ajax({
url: '/auth/', //也可以反向解析{% url 'login' %}
type: 'post',
data: {
'username': $("#id_username").val(),
'password': $('#id_password').val()
},
success: function (data){
}
})；
}；
// .serialize() 方法可將input>, textarea> 以及 select>表單序列化
// 成urlencoded格式數(shù)據(jù)
$("#btnSubmit").click(function () {
let data = $("#loginForm").serialize();
$.ajax({
url: "/auth/", //別忘了加斜杠
type: $("#loginForm").attr('method'),
data: data,
success: function (data) {
}
});
});
Ajax通過(guò)FormData上傳文件
Ajax上傳文件需要借助于js內(nèi)置對(duì)象FormData，另外上傳文件時(shí)表單千萬(wàn)別忘了加enctype="multipart/form-data"屬性。
//案例1，點(diǎn)擊submi上傳文件
$("#submitFile").click(function () {
let formData = new FormData($("#upload-form"));
$.ajax({
url:"/upload/",//也可以寫(xiě){% url 'upload' %}
type:"post",
data:formData,
//這兩個(gè)要必須寫(xiě)
processData:false, //不預(yù)處理數(shù)據(jù) 因?yàn)镕ormData 已經(jīng)做了
contentType:false, //不指定編碼了 因?yàn)镕ormData 已經(jīng)做了
success:function(data){
console.log(data);
}
});
});
//案例2,同時(shí)上傳文件并提交其它數(shù)據(jù)
$("#submitFile").click(function () {
//js取到文件
let myfile = $("#id_file")[0].files[0];
//生成一個(gè)FormData對(duì)象
let formdata = new FormData();
//加值
formdata.append('name', $("#id_name").val());
//加文件
formdata.append('myfile', myfile);
$.ajax({
url: '/upload/', //url別忘了加/杠
type: 'post',
//這兩個(gè)要必須寫(xiě)
processData:false, //不預(yù)處理數(shù)據(jù) 因?yàn)镕ormData 已經(jīng)做了
contentType:false, //不指定編碼了 因?yàn)镕ormData 已經(jīng)做了
data: formdata,
success: function (data) {
console.log(data);
}
});
});
Ajax提交Json格式數(shù)據(jù)
前后端傳輸數(shù)據(jù)的時(shí)候一定要確保聲明的編碼格式跟數(shù)據(jù)真正的格式是一致的。如果你通過(guò)Ajax發(fā)送Json格式數(shù)據(jù)給Django后端，請(qǐng)一定注意以下三點(diǎn)：
- contentType參數(shù)指定成application/json;
- 數(shù)據(jù)是真正的json格式數(shù)據(jù)；
- Django后端不會(huì)幫你處理json格式數(shù)據(jù)需要你自己去request.body獲取并處理。
$("#submitBtn").click(function () {
var data_obj={'name':'abcdef','password':123456};//Javascript對(duì)象
$.ajax({
url:'',
type:'post',
contentType:'application/json', //一定要指定格式 contentType
data:JSON.stringify(data_obj), //轉(zhuǎn)換成json字符串格式
success:function (data) {
console.log(data)
}
});
});
Ajax發(fā)送POST請(qǐng)求時(shí)如何通過(guò)CSRF認(rèn)證
// 第一種方式直接在發(fā)送數(shù)據(jù)中加入csrfmiddlewaretoken
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
data:{
csrfmiddlewaretoken: {{ csrf_token }}, //寫(xiě)在模板中，才會(huì)被渲染
},
success:function (data) {
}
});
});
//通過(guò)jquery選擇器獲取csrfmiddlewaretoken
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
data:{
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),
},
success:function (data) {
}
});
});
//使用jquery.cookie.js調(diào)用請(qǐng)求頭cookie中的csrftoken
script src="/static/jquery.cookie.js">
script>
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:$("#form1").serialize()
});
})
/script>
Django Ajax案例1：聯(lián)動(dòng)下例菜單
聯(lián)動(dòng)下拉菜單是Web開(kāi)發(fā)中一個(gè)被經(jīng)常使用的應(yīng)用。比如當(dāng)你從一個(gè)列表從選擇一個(gè)國(guó)家的時(shí)候，聯(lián)動(dòng)下拉菜單會(huì)同步顯示屬于該國(guó)家所有城市列表供用戶(hù)選擇。今天我們就教你如何使用Django+Ajax生成聯(lián)動(dòng)下拉菜單。
我們的模型如下所示：
class Country(models.Model):
name = models.CharField(verbose_name="國(guó)家", max_length=50)
def __str__(self):
return self.name
class City(models.Model):
name = models.CharField(verbose_name="城市", max_length=50)
country = models.ForeignKey(Country, on_delete=models.CASCADE, verbose_name="國(guó)家",)
def __str__(self):
return self.name
我們的模板如下所示，表單中對(duì)應(yīng)國(guó)家和城市下拉菜單的DOM元素id分別為id_country和id_city。當(dāng)用戶(hù)選擇國(guó)家后，ajax會(huì)攜帶國(guó)家的id值向后臺(tái)發(fā)送請(qǐng)求獲得當(dāng)前國(guó)家的所有城市清單，并在前端渲染顯示。
{% block content %}
h2>創(chuàng)建用戶(hù) - 聯(lián)動(dòng)下拉菜單/h2>
form method="post" class="form-horizontal" role='form' action="">
{% csrf_token %}
{{ form.as_p }}
button type="submit" class="btn btn-primary">Submit/button>
/form>
{% endblock %}
script src="https://code.jquery.com/jquery-3.1.0.min.js">/script>
script>
$("#id_country").change(function() {
var country_id = $(this).val();
$.ajax({
url: '/ajax/load_cities/',
data: {
'country_id': country_id
},
type: 'GET',
dataType: 'json',
success: function (data) {
var content='';
$.each(data, function(i, item){
content+='option value='+item.id+'>'+item.name+'/option>'
});
$('#id_city').html(content)
},
});
});
/script>
Django負(fù)責(zé)處理視圖Ajax請(qǐng)求的視圖函數(shù)如下所示：
def ajax_load_cities(request):
if request.method == 'GET':
country_id = request.GET.get('country_id', None)
if country_id:
data = list(City.objects.filter(country_id=country_id).values("id", "name"))
return JsonResponse(data, safe=False)
Django Ajax案例2：Ajax上傳文件
前端模板及js文件如下所示, 請(qǐng)注意我們是如何在表單中加入了enctype屬性，如何使用FormData上傳文件，并解決了csrftoken問(wèn)題的。
{% block content %}
form action="" method="post" enctype="multipart/form-data" id="form">
ul class="errorlist">/ul>
{% csrf_token %}
{{ form.as_p }}
input type="button" class="btn btn-info form-control" value="submit" id="btn" />
/form>
table class="table table-striped" id="result">
/table>
{% endblock %}
{% block js %}
script src=" https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js ">
/script>
script>
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function(){
$('#btn').click(function(e){
e.preventDefault();
// 構(gòu)建FormData對(duì)象
var form_data = new FormData();
form_data.append('file', $('#id_file')[0].files[0]);
$.ajax({
url: '/file/ajax_upload/',
data: form_data,
type: 'POST',
dataType: 'json',
// 告訴jQuery不要去處理發(fā)送的數(shù)據(jù), 發(fā)送對(duì)象。
processData : false,
// 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭
contentType : false,
// 獲取POST所需的csrftoken
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}},
success: function (data) {
if(data['error_msg']) {
var content = 'li>'+ data['error_msg'] + '/li>';
$('ul.errorlist').html(content);
}
else
{
var content= 'thead>tr>' +
'th>Name and URL/th>' +
'th>Size/th>' +
'/tr>/thead>tbody>';
$.each(data, function(i, item) {
content = content +
'tr>td>' +
"a href= ' " +
item['url'] +
" '> " +
item['url'] +
'/a>/td>td>' +
item['size'] +
'/td>td>tr>'
});
content = content + "/tbody>";
$('#result').html(content);
}
},
});
});
});
/script>
{% endblock %}
Django負(fù)責(zé)處理視圖Ajax請(qǐng)求的視圖函數(shù)如下所示：
# handling AJAX requests
def ajax_upload(request):
if request.method == "POST":
form = FileUploadModelForm(data=request.POST, files=request.FILES)
if form.is_valid():
form.save()
# Obtain the latest file list
files = File.objects.all().order_by('-id')
data = []
for file in files:
data.append({
"url": file.file.url,
"size": filesizeformat(file.file.size),
})
return JsonResponse(data, safe=False)
else:
data = {'error_msg': "Only jpg, pdf and xlsx files are allowed."}
return JsonResponse(data)
return JsonResponse({'error_msg': 'only POST method accpeted.'})
以上就是Django如何與Ajax交互的詳細(xì)內(nèi)容，更多關(guān)于Django與Ajax交互的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:- Django與AJAX實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼
- 使用AJAX和Django獲取數(shù)據(jù)的方法實(shí)例
- Django查詢(xún)優(yōu)化及ajax編碼格式原理解析
- 淺析Django 接收所有文件,前端展示文件（包括視頻，文件，圖片）ajax請(qǐng)求
- django ajax發(fā)送post請(qǐng)求的兩種方法
- django框架中ajax的使用及避開(kāi)CSRF 驗(yàn)證的方式詳解
- Django中ajax發(fā)送post請(qǐng)求 報(bào)403錯(cuò)誤CSRF驗(yàn)證失敗解決方案
- Django結(jié)合ajax進(jìn)行頁(yè)面實(shí)時(shí)更新的例子
- Django 通過(guò)JS實(shí)現(xiàn)ajax過(guò)程詳解
- Django利用AJAX技術(shù)實(shí)現(xiàn)博文實(shí)時(shí)搜索
