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); 
    }); 
};