Javascript 从Django 1.7中的select标记获取POST值

在我的表格里

class CollegeForm(forms.ModelForm):
    collegeName = forms.ModelChoiceField(label='Select College', queryset=College.objects.all(), widget=forms.Select(attrs={'class': 'form-control'}))

    class Meta:
        model = College
        fields = ('collegeName',)

在我看来.py

if(request.method =='POST'):
    college_form = CollegeForm(request.POST)
else:
    college_form = CollegeForm()
return render(request, 'market/product_list.html',{'college_form': college_form})

在我的product_list.html文件中，我有

<div class="col-md-4">
    {{ college_form.as_p }}
</div>

---

我想根据用户从下拉列表中选择的内容动态更新页面内容。有没有办法通过调用Ajax来实现这一点？如果是，怎么做？

简短的回答是肯定的。但这在很大程度上取决于你想做什么

根据您希望更改的页面大小和方式，您可能不需要ajax调用。您可以在初始请求中发送数据，并使用javascript以特定方式更新页面

如果每个选择都有大量数据，那么您可以采取一种非常简单的方法，在每次进行新选择时加载页面。这里的用户体验有点笨重，但也可以很有效

最后，如果您有大量数据，并且希望获得流畅的体验，那么可以使用ajax。您需要有一个端点，根据选择为您提供必要的数据。如果你走这条路，我建议你使用一些javascript框架，比如。以下是有关的文档

下面是一个ajax解决方案的示例。这只是一个概要，假设您正在使用jquery。还有一些额外的细节将取决于实施细节：

您的新视图.py：

import json

from django.shortcuts import render
from django.http import HttpResponse

from forms import CollegeForm
from models import CollegeInfo


def original_endpoint(request):
    # ...
    if request.method == 'POST':
        college_form = CollegeForm(request.POST)
    else:
        college_form = CollegeForm()
    return render(request, 'market/product_list.html', {'college_form': college_form})


def college_data_endpoint(request, college_name):
    """
    Endpoint for sending back college-specific data

    Response sent back in json format to make for easier processing with javascript
    """

    # Get college-specific data from the db
    college = CollegeInfo.objects.get(id=college_name)

    # format it
    response_data = {
        'field1': college.field1,
        'field2': college.field2
    }

    return HttpResponse(json.dumps(response_data), content_type='application/json')

对product_list.html的更改：

<div id="js-college-selector" class="col-md-4">
    {{ college_form.as_p }}
</div>

<div id="js-college-data" class="hidden">
    {# HTML form to fill in college info and possibly unhide #}
</div>

<script type="text/javascript">
    // Assuming that you are using jquery
    // You would eventually want to move this to a javascript file
    $("#js-college-selector").change(function() {
        // jQuery
        var selectedText = $(this).find(':selected').text();
        $.ajax({
            type: "GET", //rest Type
            dataType: 'jsonp', //mispelled
            url: "path/to/college/info/endpoint",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (data, textStatus, jqXHR) {
                // data is the college info to be used to modify the page with
                console.log(data);
            }
        });
    });
}
</script>

---

我有很多数据，可能不得不使用ajax。您能告诉我如何将从下拉列表中选择的值输入到我的views.py中吗？这不是它的工作方式。加载页面后，除非有页面加载，否则不会再次运行views.py代码。如果您希望使用ajax而不是页面加载来实现这一点，那么将在javascript中从下拉列表中提取值。我现在必须运行，但今天晚些时候，我可以给出一个示例，说明这是如何工作的。好的，我需要从数据库中进行查询，以更新页面的内容。因此，我需要在views.py中获取所选值并使用它。你能给我举个例子吗？谢谢。我简要介绍了你需要做的事情。我希望这足以让你开始。