如何通过 AJAX 设置 Django 表单值

Question

我正在尝试将 Django 生成的表单与 AJAX 调用一起用于数据填充。我只有一个普通的 ModelForm 工作，但是当我向它添加一个 inlineformset 时，我迷失了我应该在一些隐藏的 id 字段中填充什么值。每个提交都在创建一个新实例。对于有地址的学校，我的保存视图中有这个：

... get school logic here ...
if school_form.is_valid():
    school = school_form.save(commit=False)
    address_formset = AddressFormSet(request.POST, instance=school)
    if address_formset.is_valid():
        school_form.save()
        address_formset.save()
... redirection logic here ...

这是填充我的表单的 JS。 #id_address_set-0-school 和 #id_address_set-0-id 是 2 个 Django 生成的字段。

$('a[name^="editSchool"]').click( function(e) {
  e.preventDefault();
  $.ajax({
    url: '/schooljson/' + this.getAttribute('schoolid') + '/'
  }).done( function(data) {
    $('#id_school_code').val(data.school_code);
    $('#id_full_name').val(data.school_name);
    $('#id_student_count').val(data.school_students);
    $('#id_school_pk').val(data.school_pk);
    $('#id_address_set-0-address_line_1').val(data.address_line_1);
    $('#id_address_set-0-address_city').val(data.address_city);
    $('#id_address_set-0-address_state').val(data.address_state);
    $('#id_address_set-0-address_zip').val(data.address_zip);
    $('#id_address_set-0-school').attr('value', data.school_pk);
    $('#id_address_set-0-id').attr('value', data.address_pk);
    $('#addSchoolModal').modal('show');
  });

有什么想法我应该放在那里吗？

Answer 1

如果您已经有一个可用的学校实例，那么将数据绑定到视图中的表单集似乎会更容易。下面的代码应该让您不必担心 id、隐藏字段等，因为 formset 已经处理了所有这些。

当您发布表单集时，您已经拥有代码

school = school_form.save(commit=False)
address_formset = AddressFormSet(request.POST, instance=school)

所以不要用 json 数据填充，为什么不呢

views.py
def school_address(request, school_id):
    school = School.objects.get(pk=school_id)
    address_formset = AddressFormSet(instance=school)
    return render(request, "school/school_address.html",
                  {'address_formset': address_formset})

在原始模板（school.html）中？使用编辑学校的链接，您将拥有一个表单集所在位置的元素。 （想必你已经把学校对象传给了模板，还有提交按钮等）

school.html

<form>
<a href="" id="edit_school" schoolid="{{ school.id }}">Edit</a>
{{ school_form }}
<div id="school_address"></div>
</form>

school_address.html 可以这么简单

{{ address_formset }}

现在在 javascript 中，success 函数将把 school_address.html 放在学校表单的内联，其中包含您需要的所有内容。

$("#edit_school").click(function(e){
  e.preventDefault();
  $.ajax({
    url: '/school_address/' + this.getAttribute('schoolid') + '/'
    success: function(data){
      $("#school_address").html(data);
    }
  });
});

旁注 - 我不认为 schoolid 作为锚标记属性将验证为适当的属性，但我理解，“它有效”。我通常将 schoolid 之类的东西存储在隐藏的输入中，以便在 js 中访问它，尽管可能有更优雅的方式

<input type="hidden" id="schoolid" value="{{ school.id }} />