jquery - Django，ajax 用模型数据填充表单

Question

所以我得到了一个简单的注册表。在这个表单中还有 3 个字段:

• 大学
• 类(class)
• 模块

我要做的是过滤数据。所以当用户选择一所大学时，类(class)字段(选择)将显示属于这所大学的所有类(class)。此外，当用户选择类(class)时，模块字段(选择)将显示属于该类(class)的所有模块。如果您查看图像，您会发现它有点简单。

我设法展示了所有的大学、类(class)和模块，但这不切实际，因为数据不正确(显示所有条目)。我知道如何过滤查询集，但我不知道如何使用 AJAX 来做到这一点。尝试了很多教程，但找不到任何东西，所以我很抱歉没有发布代码。

如果您能指出正确的教程、示例或给我一些代码以开始处理它...

更新我使用 Del 的例子开始研究它。问题是我对 AJAX 和 JS 一点都不擅长。所以我创建了一个 View ，它接收来自 ajax 表单的请求(现在它只返回所有类(class)，没有过滤)。我遇到的问题是，当我选择大学时，然后是 course选择变空。所以我猜它没有从 View 中获取数据。如果你能看看..

查看

def ajax_get_courses(request):
    courses = Course.objects.all()
    if request.is_ajax():
        data = serializers.serialize('json', courses)
        return HttpResponse(data,'json')
    else:
        return render_to_response('registration/registration_form_teacher.html', {'courses':courses}, context=RequestContext(request))

js

$(document).ready(function(){
    $("#university").change(function(){
        var request = $.ajax({
            url: "{% url 'ajax_get_courses' %}",
            type: "POST",
            data: { university: $("#university").val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                  },
            dataType: "html"
        });

        request.done(function(msg) {
                  $("#course").html( msg );
        });

    });

});

更新 2

所以我选择大学后，选择类(class)源码是这样的:

<select id="course" name="course" class="form-control">[{"pk": 1, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "BSc (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 2, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "MComp (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 3, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "BEng (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 4, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "MEng (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 5, "model": "studies.course", "fields": {"attendance": "FT", "name": "Pharmacy", "degree": "MPharm (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 6, "model": "studies.course", "fields": {"attendance": "FT", "name": "Aeronautical Engineering", "degree": "MEng (Hons)", "university": 4, "modules": [], "years": 4}}, {"pk": 7, "model": "studies.course", "fields": {"attendance": "FT", "name": "Biochemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 8, "model": "studies.course", "fields": {"attendance": "FT", "name": "Chemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 9, "model": "studies.course", "fields": {"attendance": "FT", "name": "Business Studies", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}]</select>

这意味着我正在获取数据但我必须添加一些 html？喜欢<li>...</li> ？

Answer 1

这需要几个步骤才能完成，但它看起来比实际情况更令人生畏。

首先创建一个新 View ，它将接收您的 ajax 请求并以 HTML 或 JSON 的形式返回正确的选择选项。

然后使用 jQuery ajax function 设置 ajax 请求在大学选择框更改时触发。

下面是一个简单的示例，可帮助您入门: ...

$("#university").change(function(){
 $.ajax({
          url: "{% url 'universities:view_name' %}",
          type: "POST",
          data: { university: $("#university").val(),
                  csrfmiddlewaretoken: '{{ csrf_token }}'
                },
          dataType: "html"
        });
  }

// When the request returns, update the contents of the select with HTML received
// from your processing view

request.done(function(msg) {
          $("#university").html( msg );
        });

希望对您有所帮助。祝你好运。

编辑:在您的更新中，您正在 View 中创建一个 json，但使用 ajax 请求 html。而不是 json，只需将 html 构建为字符串并将其呈现为模板的唯一内容。

在你看来是这样的:

html_string="" 
for course in Courses.objects.all(): 
    html_string += '<option value="%s">%s</option>' % (course.pk, course.name)

您可以使用 json 数据在客户端使用 javascript 执行此任务，但我认为它更容易并且需要更少的数据传输来在 View 中处理它。