Django,ajax使用模型数据填充表单
所以我得到了一个简单的注册表单。 在这个表格中还有3个字段:
我想要做的是过滤数据。 因此,当用户选择一所大学时,课程领域(选择)将显示属于该大学的所有课程。 另外,当用户选择课程时,模块字段(选择)将显示属于该课程的所有模块。 如果你检查图像,你会发现它很简单。
我设法展示了所有的大学,课程和模块,但由于数据不正确(显示所有条目),这是不实际的。 我知道如何过滤查询集,但我不知道如何使用AJAX来做到这一点。 尝试了很多教程,但找不到任何东西,所以我很抱歉没有发布代码。
如果你能指点我正确的教程,例子或给我一些代码开始工作...
更新我使用Del的例子开始工作。 问题在于我对AJAX和JS并不擅长。 所以我创建了一个视图,它接收来自ajax表单的请求(现在它只返回所有课程,不进行过滤)。 我遇到的问题是,当我选择大学时, course
选择会变空。 所以我想它不会从视图中获取数据。 如果你可以看看..
视图
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
所以在我选择一所大学后,选择课程的源代码如下所示:
<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>
?
这需要几个步骤才能完成,但它看起来比实际上更加恐吓。
首先创建一个新的视图,它将接收您的ajax请求,并以HTML或JSON形式返回适当的选择选项。
然后使用jQuery ajax函数设置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 );
});
我希望这个能有一点帮助。 祝你好运。
编辑:在你的更新中,你在你的视图中创建一个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执行此任务,但我认为它更简单,并且需要较少的数据传输才能在视图中处理它。
链接地址: http://www.djcxy.com/p/78751.html上一篇: Django, ajax populate form with model data
下一篇: MySQL : Selecting values from a specific column is very slow