Django动态输入

时间:2016-08-04 08:28:43

标签: python django django-templates django-views python-3.5

我想创建动态输入系统,例如当我输入文件夹名称时 - 里面的文件列表会自动显示下面的另一个输入ChoiceField,所以我可以选择该文件。方法已经编写,问题是 - 如何在Django视图中创建它?

以下是我的观点:

def get_name(request):
    if request.method == 'POST':
        form = NameForm(request.POST)
        if form.is_valid():
            dir_date = format_date(request.POST['date'])

            files = os.listdir(os.path.join(path+dir_date))
            return render(request, 'inform/show_name.html', {'data': request.POST['your_name'],
                                                             'date': format_date(request.POST['date'])})
    else:
        form = NameForm()
    return render(request, 'inform/base.html', {'form': form})

这是表单类:

class NameForm(forms.Form):
    your_name = forms.CharField(label='Your name', max_length=100)
    date = forms.DateField(widget=forms.DateInput(attrs={'class': 'datepicker'}))
    flights = forms.ChoiceField(choices=?)

最后,这是我的模板。

{% extends 'inform/header.html' %}
{% block content %}
    <script>
      $( function() {
        $( ".datepicker" ).datepicker();
        $( "#anim" ).on( "change", function() {
          $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
        });
      } );
    </script>
    <div class="container" style="color: red; size: auto;">
        <form class="form-vertical" action="get_name" role="form" method="post">
            {% csrf_token %}
            <div class="form-group" style="display: inherit">
            <center>
                {{form}}
                <input type="submit" value="OK">
            </center>
            </div>
        </form>
    </div>
{% endblock %}

有没有办法动态读取Date输入中的数据并将其提供给视图内的方法而不单击提交按钮或创建其他几个?如果它只能通过ajax,jQuery或JS来解决,你能不能给我一个简单的例子来说明它是如何完成的?由于无法创建简单的表单,我感到非常沮丧。

提前谢谢!

1 个答案:

答案 0 :(得分:0)

所以基本上你做得对。您已经知道on(change)

需要datepicker功能

现在,只要用户更改日期,就会触发on(change)功能。因此,您现在需要做的就是获取新的日期值,这是您$( this ).val()时已经拥有的值。之后,在views.py

中对您的方法ajax进行url调用get_name

这样的事情:

$( function() {
    $( ".datepicker" ).datepicker();
    $( "#anim" ).on( "change", function() {
        $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
        send_changed_date_value(variable_with_new_date);
    });
});

function send_changed_date_value(new_date) {
    $.ajax({
       type: // "POST" or "GET", whichever you are using
       url: "/url in urls.py corresponding to get_name method in views.py/",
       data: new_date,

       success: function(response){
            console.log("Success..!!")
       }
    });
}

每次更改时,都可以将新日期值发送到视图。如果您想提交完整的表单数据,即your_nameflights数据,那么您可以直接在serialzed data data属性中发送表单的ajax {1}}。

注意 - &gt;您必须从HttpResponse视图返回get_name,因为ajax调用需要后端的 HttpResponse 才能成功完成ajax调用。您可以在响应中返回一个字符串。