javascript - Django 表单用作 popus 时是否应该在客户端填充

Question

我的问题最好通过例子来描述。 考虑一张学生表。当我点击某个学生时，应该打开一个弹出窗口，其中包含该学生的全面信息。首先，每次用户单击学生时，我都会通过 Ajax 执行 GET 请求，并使用获取的响应填充弹出窗口。换句话说，我做了这样的事情:

def my_view(request):
    if request.method == 'GET': 
        model_instance = MyModel.objects.get(id = request.POST['id']): 
        context = {'my_form': MyForm(instance = model_instance)}

        msg = render_to_string('my_template.html', context, request = request)
        return JsonResponse({'object': msg}, safe = False)
    else:
        # POST-request for saving input data to db

然后在JS代码中:

$.get(....., function(response){
    $(response.object).modal('show');
}

此代码的问题是弹出窗口出现延迟。嗯，是的，只有半秒钟，但我希望能够立即得到响应。特别是如果用户网速较慢，用户体验会更差。

这里的最佳实践是什么？我想到的另一种选择是:在渲染主页(带有学生表)时，传递一个空表单(或者像 Django doc 所说的那样，通过执行 my_form = MyForm() 来解除绑定(bind)表单) ，然后当用户单击学生时使用 JavaScript 填充它。好吧，这种方法产生超快的弹出渲染，但这种方法并不干燥，ForeignKey 字段的情况在这里非常令人讨厌，而且总的来说，这种方法看起来像是垃圾代码

Answer 1

使用 JavaScript 填充表单并不一定很丑陋。在使用 HTML data- 属性来帮助保持简洁之前，我已经做过类似的事情。如果您使用 jQuery，它可能看起来像这样:

{% for student in students %}
<div class="student" data-student-id="{{ student.id }}" data-student-first-name="{{ student.first_name }}">
  {{ student.first_name }}
</div>
{% endfor %}

<!-- Pretend this is inside a modal -->
{{ form.as_p }}

<script>
$('.student').click(function() {
  var studentId = $(this).data('student-id');
  var firstName = $(this).data('student-first-name');
  $('#id_id').value = studentId;
  $('#id_first_name').value = firstName;
});
</script>

这假设 Student.id 是 HiddenInput Widget 。 不需要太多的 JS 就能得到很好的结果。