前后端傳輸數(shù)據(jù)的編碼格式

前后端傳輸數(shù)據(jù)的編碼格式主要有三種, 本文接下來將詳細(xì)演示。

urlencodedformdatajsonAjax提交urlencoded格式數(shù)據(jù)

Ajax給后臺發(fā)送數(shù)據(jù)的默認(rèn)編碼格式是urlencoded，比如username=abcde&password=123456的形式。Django后端拿到符合urlencoded編碼格式的數(shù)據(jù)都會自動幫你解析分裝到request.POST中,與form表單提交的數(shù)據(jù)相同。

下面兩種方式是等同的。

//手動構(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通過FormData上傳文件

Ajax上傳文件需要借助于js內(nèi)置對象FormData，另外上傳文件時表單千萬別忘了加enctype='multipart/form-data'屬性。

//案例1，點擊submi上傳文件$('#submitFile').click(function () { let formData = new FormData($('#upload-form')); $.ajax({ url:'/upload/',//也可以寫{% url ’upload’ %} type:'post', data:formData, //這兩個要必須寫 processData:false, //不預(yù)處理數(shù)據(jù) 因為FormData 已經(jīng)做了 contentType:false, //不指定編碼了 因為FormData 已經(jīng)做了 success:function(data){ console.log(data); } });}); //案例2,同時上傳文件并提交其它數(shù)據(jù)$('#submitFile').click(function () { //js取到文件 let myfile = $('#id_file')[0].files[0]; //生成一個FormData對象 let formdata = new FormData(); //加值 formdata.append(’name’, $('#id_name').val()); //加文件 formdata.append(’myfile’, myfile); $.ajax({url: ’/upload/’, //url別忘了加/杠type: ’post’,//這兩個要必須寫processData:false, //不預(yù)處理數(shù)據(jù) 因為FormData 已經(jīng)做了contentType:false, //不指定編碼了 因為FormData 已經(jīng)做了data: formdata,success: function (data) { console.log(data);} });}); Ajax提交Json格式數(shù)據(jù)

前后端傳輸數(shù)據(jù)的時候一定要確保聲明的編碼格式跟數(shù)據(jù)真正的格式是一致的。如果你通過Ajax發(fā)送Json格式數(shù)據(jù)給Django后端，請一定注意以下三點：

contentType參數(shù)指定成application/json; 數(shù)據(jù)是真正的json格式數(shù)據(jù)； Django后端不會幫你處理json格式數(shù)據(jù)需要你自己去request.body獲取并處理。

$('#submitBtn').click(function () { var data_obj={’name’:’abcdef’,’password’:123456};//Javascript對象 $.ajax({url:’’,type:’post’,contentType:’application/json’, //一定要指定格式 contentTypedata:JSON.stringify(data_obj), //轉(zhuǎn)換成json字符串格式success:function (data) { console.log(data)} });});Ajax發(fā)送POST請求時如何通過CSRF認(rèn)證

// 第一種方式直接在發(fā)送數(shù)據(jù)中加入csrfmiddlewaretoken$('#btn').on('click',function () { $.ajax({url:'/some_url/',type:'POST',data:{ csrfmiddlewaretoken: {{ csrf_token }}, //寫在模板中，才會被渲染},success:function (data) { }});}); //通過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)用請求頭cookie中的csrftoken<script src='https://rkxy.com.cn/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)動下例菜單

聯(lián)動下拉菜單是Web開發(fā)中一個被經(jīng)常使用的應(yīng)用。比如當(dāng)你從一個列表從選擇一個國家的時候，聯(lián)動下拉菜單會同步顯示屬于該國家所有城市列表供用戶選擇。今天我們就教你如何使用Django+Ajax生成聯(lián)動下拉菜單。

我們的模型如下所示：

class Country(models.Model): name = models.CharField(verbose_name='國家', max_length=50) def __str__(self):return self.nameclass City(models.Model): name = models.CharField(verbose_name='城市', max_length=50) country = models.ForeignKey(Country, on_delete=models.CASCADE, verbose_name='國家',) def __str__(self):return self.name

我們的模板如下所示，表單中對應(yīng)國家和城市下拉菜單的DOM元素id分別為id_country和id_city。當(dāng)用戶選擇國家后，ajax會攜帶國家的id值向后臺發(fā)送請求獲得當(dāng)前國家的所有城市清單，并在前端渲染顯示。

{% block content %}<h2>創(chuàng)建用戶 - 聯(lián)動下拉菜單</h2><form method='post' 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請求的視圖函數(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文件如下所示, 請注意我們是如何在表單中加入了enctype屬性，如何使用FormData上傳文件，并解決了csrftoken問題的。

{% block content %}<form action='' method='post' enctype='multipart/form-data' id='form'> <ul class='errorlist'></ul> {% csrf_token %}{{ form.as_p }} <input type='button' value='submit' /></form><table id='result'></table>{% endblock %}{% block js %}<script src='http://www.hdgsjgj.cn/bcjs/ 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對象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ā)送對象。processData : false,// 告訴jQuery不要去設(shè)置Content-Type請求頭contentType : false,// 獲取POST所需的csrftokenbeforeSend: 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請求的視圖函數(shù)如下所示：

# handling AJAX requestsdef 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交互的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！