Django - jquery：根据另一个组合框的选择填充组合框

Question

我对 Django 和 jquery 的东西很陌生。我正在尝试根据在另一个组合框中选择的选项填充组合框（Django 中的选择字段）（无需重新加载页面）。

我找不到任何简单的 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 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);
    }); 
};