1

我一直有这个问题。但我无法弄清楚如何做到这一点。有没有办法，我们可以使用带有模板语言的 javascript 对象。例如，我有在选择小部件上呈现的类别查询集。

Category: <select name="category" id="id_category">
{% for category in categories %}
<option value="{{category.id}}">{{category.name}}</option>
{% endfor %}
</select>

现在，对于选定的类别，我异步调用服务器以返回相关的产品类型。

$('#id_category').change(function(){
    getProductTypes($(this).val());

});

在 ajax 函数中，我无法在 url 模板标签中使用 category_id js 对象。因此，我必须对目标 url 进行硬编码。任何人都可以建议一种方法来处理这个问题。谢谢

function getProductTypes(category_id){
         //Would like to do this
           var url = {% url lookup_product_types category_id %}
         //But end up doing this
           var url = '/'+category_id+'/product_types/find/'
              $.ajax({
                url:url,
                data:{category:category_id},
                dataType:'json',
                success: function(data, status, xhr){
                    html = '<select>';
                    $.each(data, function(index, value){
                        html += '<option value='+this.pk+'>'+this.fields.name+'</option>';
                    });
                    html += '</select>';
                    $('#productType').html(html);
                }  
              });
4

1 回答 1

1

在选项标签上使用数据属性怎么样？

您可以将模板更新为 -

{% for category in categories %}
    <option data-url="{% url lookup_product_types category.id %}" value="{{category.id}}">{{category.name}}</option>
{% endfor %}

然后按照以下方式更改ajax -

$('#id_category').change(function(){
    var url = $(this).find('option:selected').attr('data-url');
    getProductTypes($(this).val(), url);
});

function getProductTypes(category_id, url){
    $.ajax({
        url: url,
        data:{ category:category_id},
        // ..
于 2012-12-12T07:34:27.873 回答