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()调用未绑定的表单），然后使用JavaScript填充它当用户点击学生时好吧，这种方法产生了超快速的弹出式渲染，但是这种方法不是DRY，使用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来获得相当不错的结果。

当用作popus时，Django表单是否应填充在客户端

1 个答案: