jquery – Django,ajax填充模型数据的形式

所以我得到了一份简单的登记表.在这种形式中还有3个字段：

>大学
>课程
>模块

我想要做的是过滤数据.因此,当用户选择大学时,课程字段(选择)将显示属于该大学的所有课程.此外,当用户选择课程时,模块字段(选择)将显示属于该课程的所有模块.如果你检查图像,你会发现它有点简单.

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

如果你能指出我正确的教程,示例或给我一些代码来开始工作……

UPDATE
我用Del的例子开始研究它.问题是我对AJAX和JS都不擅长.所以我创建了一个从ajax表单接收请求的视图(现在它只返回所有课程,没有过滤).我遇到的问题是,当我选择大学时,课程选择会变空.所以我猜它不会从视图中获取数据.如果你能看看..

视图

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))

$(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

所以在选择大学之后,选择课程的源代码是这样的：

<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,"degree": "MComp (Hons)","years": 4}},{"pk": 3,"name": "Civil Engineering","degree": "BEng (Hons)",{"pk": 4,"degree": "MEng (Hons)",{"pk": 5,"name": "Pharmacy","degree": "MPharm (Hons)",{"pk": 6,"name": "Aeronautical Engineering","university": 4,{"pk": 7,"name": "Biochemistry","university": 3,{"pk": 8,"name": "Chemistry",{"pk": 9,"name": "Business Studies","years": 3}}]</select>

这意味着我正在获取数据,但我必须添加一些HTML？喜欢< li> …< / li&gt ;?

解决方法

这需要几个步骤来完成,但它看起来比实际更令人生畏.

首先创建一个新视图,它将接收您的ajax请求并将正确的选择选项作为HTML或JSON返回.

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

这是一个尝试帮助您入门的简单示例：
…

$("#university").change(function(){
 $.ajax({
          url: "{% url 'universities:view_name' %}",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 );
        });

我希望这能有所帮助.祝你好运.

编辑：
在您的更新中,您在视图中创建了一个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执行此任务,但我认为它更容易,并且需要更少的数据传输来在视图中处理它.

原文地址：https://www.jb51.cc/jquery/178349.html

jquery – Django,ajax填充模型数据的形式

解决方法

相关推荐