Django-jquery : populate combobox based on selection of another combobox

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 默认情况下会阻止没有 CSRF token 且返回 403 的 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>

请注意，它使用的是双括号，而不是 {%%}。这将获取 token 的值，而不是表单输入。

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 post指定回调，然后处理从服务器返回的数据:

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