欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django如何與Ajax交互

 更新時間：2021年04月29日 10:19:56   作者：大江狗  
Django前端模板向后端發(fā)送POST請求主要有兩種方式：form表單和ajax請求。本文將詳細介紹Django與Ajax的交互方式，如何通過csrftoken認證，并提供了兩個具體示例。

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

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

urlencoded
formdata
json

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

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

下面兩種方式是等同的。

//手動構造數(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,  //不預處理數(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,  //不預處理數(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后端，請一定注意以下三點：

  1. contentType參數(shù)指定成application/json;
  2. 數(shù)據(jù)是真正的json格式數(shù)據(jù)；
  3. Django后端不會幫你處理json格式數(shù)據(jù)需要你自己去request.body獲取并處理。
$("#submitBtn").click(function () {
    var data_obj={'name':'abcdef','password':123456};//Javascript對象
    $.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請求時如何通過CSRF認證

// 第一種方式直接在發(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="/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)常使用的應用。比如當你從一個列表從選擇一個國家的時候，聯(lián)動下拉菜單會同步顯示屬于該國家所有城市列表供用戶選擇。今天我們就教你如何使用Django+Ajax生成聯(lián)動下拉菜單。

我們的模型如下所示：

class Country(models.Model):
    name = models.CharField(verbose_name="國家", 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="國家",)

    def __str__(self):
        return self.name

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

{% block content %}
<h2>創(chuàng)建用戶 - 聯(lián)動下拉菜單</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負責處理視圖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" 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();
        // 構建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不要去設置Content-Type請求頭
        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負責處理視圖Ajax請求的視圖函數(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交互的詳細內(nèi)容，更多關于Django與Ajax交互的資料請關注腳本之家其它相關文章！

相關文章

  • Python簡單讀寫Xls格式文檔的方法示例

    Python簡單讀寫Xls格式文檔的方法示例

    這篇文章主要介紹了Python簡單讀寫Xls格式文檔的方法,結合實例形式分析了Python中xlrd和xlwt模塊的安裝及針對xls格式文檔的相關讀寫操作實現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • python操作MySQL的詳細教程

    python操作MySQL的詳細教程

    PyMySQL 是一個純 Python 的庫,用于連接 MySQL 數(shù)據(jù)庫,并執(zhí)行 SQL 語句,該庫的主要用途是通過 Python 代碼與 MySQL 數(shù)據(jù)庫進行交互,比如執(zhí)行查詢、插入數(shù)據(jù)、更新數(shù)據(jù)、刪除數(shù)據(jù)等操作,本文介紹了python操作MySQL的詳細教程,需要的朋友可以參考下
    2024-10-10
  • python爬取淘寶商品詳情頁數(shù)據(jù)

    python爬取淘寶商品詳情頁數(shù)據(jù)

    這篇文章主要為大家詳細介紹了python爬取淘寶商品詳情頁數(shù)據(jù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-02-02
  • python turtle 繪制太極圖的實例

    python turtle 繪制太極圖的實例

    今天小編就為大家分享一篇python turtle 繪制太極圖的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-12-12
  • Python區(qū)塊鏈塊的添加教程

    Python區(qū)塊鏈塊的添加教程

    這篇文章主要為大家介紹了Python區(qū)塊鏈塊的添加教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-05-05
  • 一文深入學習Python中的os.listdir函數(shù)

    一文深入學習Python中的os.listdir函數(shù)

    這篇文章主要給大家介紹了關于Python中os.listdir函數(shù)的相關資料,os.listdir是 Python中的一個函數(shù),它的意思是返回指定目錄下的文件和文件夾的名稱的列表,需要的朋友可以參考下
    2023-10-10
  • 使用with torch.no_grad():顯著減少測試時顯存占用

    使用with torch.no_grad():顯著減少測試時顯存占用

    這篇文章主要介紹了使用with torch.no_grad():顯著減少測試時顯存占用問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-08-08
  • python多線程操作實例

    python多線程操作實例

    這篇文章主要介紹了python多線程操作實例,本文先是講解了python多線程的相關知識、python多線程使用的兩種方法等內(nèi)容,需要的朋友可以參考下
    2014-11-11
  • 介紹Python中內(nèi)置的itertools模塊

    介紹Python中內(nèi)置的itertools模塊

    這篇文章主要介紹了介紹Python中內(nèi)置的itertools模塊,itertools模塊中包含了許多Python中常用的函數(shù),是學習Python當中必須熟悉和掌握的一個模塊,需要的朋友可以參考下
    2015-04-04
  • Python實現(xiàn)位圖分割的效果

    Python實現(xiàn)位圖分割的效果

    目前網(wǎng)絡上大多為用C++或者Matlab編寫實現(xiàn)位圖分割，所以本文將使用Python實現(xiàn)位圖分割這一效果，代碼簡單易懂，感興趣的小伙伴可以關注一下
    2021-11-11

最新評論