Django的 - jquery：基於另一個組合框的選擇填充組合框

Question

我對Django和jQuery的東西很新。我試圖根據在另一個組合框中選擇的選項（無需重新加載頁面）填充組合框（Django中的ChoiceField）。

我找不到任何這種ajax基本應用程序的簡單例子。

現在，我從第一個下拉列表中選擇一個項目，然後調用以下ajax函數。

function get_asset_from_type(){ 
     var type_asset = $("#id_type").val(); 
     var data = {type_asset:type_asset}; 
     var args = {type:"POST", url:"/asset/etatType/", data:data}; 
     $.ajax(args); 

     alert(type_asset); 

     return false; 
}; 

它警告正確的類型，但給出的URL給出403錯誤。奇怪的是這個網址第一次加載頁面。我不明白這是怎麼回事..

編輯： 403錯誤似乎消失了，仍然是最初的問題:)

Answer 1

我想你對一個CSRF問題跑起來。由於Django默認阻止了沒有使用403的CSRF令牌的POST請求。在JS中有幾種方法可以解決這個問題。一是拉動值從cookie的，代碼要做到這一點可以在這裏找到：https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

，或者您可以通過將CSRF_TOKEN中使用JavaScript腳本標籤做到這一點：

<script src='myjavascript.js?CSRF_TOKEN={{ csrf_token }}'></script> 

注它使用的是雙重大括號，而不是{%%}。這會獲取令牌的值，而不是表單輸入。

function getOptionsFromScriptSrc() { 
    // Get last script tag in parsed DOM. 
    // Due to the way html pages are parsed, 
    // the last one is always the one being loaded. 

    var options = {} 
    var js_src = $('script').last().attr('src'); 

    if(js_src.match(/\?/)) { 
     var options_list = js_src.split('?')[1].split('&'); 
     for(var i = 0; i < options_list.length; i++) { 
      var tmp = options_list[i].split('='); 
      options[$.trim(tmp[0])] = $.trim(tmp[1]); 
     } 
    } 

    return options; 
} 

function get_asset_from_type(){ 
    var options = getOptionsFromScriptSrc(); 
    var type_asset = $("#id_type").val(); 
    var data = {type_asset: type_asset, csrfmiddlewaretoken: options['CSRF_TOKEN']}; 
    var args = {type:"POST", url:"/asset/etatType/", data:data}; 
    $.ajax(args); 

    alert(type_asset); 

    return false; 
}; 

我當然沒有測試過這個代碼，但是我之前用過這個方法，它工作得很好。

---

要填充一個選擇框的主要問題，你需要指定你的AJAX後回調，然後處理從服務器返回的數據：

function get_asset_from_type(){ 
    var options = getOptionsFromScriptSrc(); 
    var type_asset = $("#id_type").val(); 
    var post_data = {type_asset: type_asset, csrfmiddlewaretoken: options['CSRF_TOKEN']}; 

    $.post('/asset/etatType/', post_data, function(data){ 
     // Assuming server is going to respond with the html of the options, eg: <option value="1">One</option><option value="2">Two</option>... 
     $('#id_ofmyselectbox').append(data); 
    }); 
};