在documentReady或ajaxStop事件上,将超链接的click事件绑定到modalConnect函数.请注意,如果你有某种更新表格内容的ajax(我有),你只需要ajaxStop函数：

<script type="text/javascript">
    $(document).ready(function() {
        modalConnect();
    });
</script>

<script type="text/javascript">
$( document ).ajaxStop( function() {
    modalConnect();
});
</script>

modalConnect函数加载我们想要在模态中呈现的表单和formUpdateURLDiv：

<script type="text/javascript">
    function modalConnect()
        {
            //unbind the click event. If not done we will end up with multiple click event bindings,since binding is done after each ajax call.
            $(".editItem").unbind('click');
            //bind the click event
            $(".editItem").click(function(ev) { // for each edit item <a>
                ev.preventDefault(); // prevent navigation
                var url = this.href; //get the href from the <a> element
                $.get(url,function(results){
                  //get the form
                  var itemForm = $("#ajax_form_modal_result",results);
                  //get the update URL
                  var formUpdateURLDiv = $("#formUpdateURL",results);
                  //get the inner html of the div
                  var formUpdateURL = formUpdateURLDiv.html();
                  //update the dom with the received form
                  $('#itemFormModal').html(itemForm);
                  //show the bootstrap modal
                  $("#itemFormModal").modal('show');
                  $(document).ready(function () {
                     //bind the form to an ajax call. ajax call will be set to the received update url
                     submitItemModalFormBind(formUpdateURL);
                  });
                },"html");
                return false; // prevent the click propagation
            })
        }
</script>

formUpdateURL包括生成的服务器(参见下面的包含视图)url,加载的表单必须对其进行表单提交调用.我们使用这个url来“初始化”submitItemModalFormBind函数：

<script type="text/javascript">
       function submitItemModalFormBind(url){
         //bind the form. prevent default behavior and submit form via ajax instead
         $('#ajax_form_modal_result').submit(function(ev){
             $.ajax({
                type: "POST",url: url,success:function(response,textStatus,jqXHR){
                     var form = $("#ajax_form_modal_result_div",response);
                     //form is returned if it is not valid. update modal with returned form
                     //change this "if" to check for a specific return code which should be set in the view
                     if (form.html()) {
                        console.log('Form was invalid and was returned');
                        //update modal div
                         $('#ajax_form_modal_result_div').html(form);
                         $("#itemFormModal").modal('show');
                      }
                      //form is not returned if form submission succeeded
                      else{
                        //update the entire document with the response received since we received a entire success page and we want to reload the entire page
                        document.open();
                        document.write(response);
                        document.close();
                        //sort by modified date descending

                        //var notificationDiv = $("#notification",response);
                        //$('#notification').html(notificationDiv.html());
                        console.log('Form was valid and was not returned');
                        $("#itemFormModal").modal('hide');
                        }
                },error) {
                            var div = $("ajax_form_modal_result_div",request.responseText);
                            $('#ajax_form_modal_result_div').html(div);
                            //implement proper error handling
                            console.log("failure");
                            console.log(request.responseText);
                        }
                    });
                    return false;
                });
              }
</script>

..并查看服务器上发生了什么,请参阅下面处理逻辑的视图：

class UpdateTaskModalView(LoginrequiredMixin,View):
template = 'list_management/crud/item/update_via_modal.html'

def get_logic(self,request,task_id,**kwargs):
    task = get_object_or_404(Task.objects,pk=task_id)
    task_form = TaskForm(instance=task)
    context = {
               'model_form': task_form,'item': task,}
    return context

def post_logic(self,pk=task_id)
    task_form = TaskForm(request.POST,instance=task)
    if task_form.is_valid():
        task = task_form.save(commit=False)
        task.modified_by = request.user
        task.save()
        messages.add_message(request,messages.INFO,'Item "%s" successfully updated' % (task.name))
        return ('redirect',HttpResponseRedirect(reverse('show_list_after_item_update',kwargs={'list_id':task.list.pk,'item_id':task.pk})))
    context = {
        'model_form' : task_form,'list': task.list,}
    return ('context',context)

def get(self,**kwargs):
    context = self.get_logic(request,**kwargs)
    return render_to_response(
        self.template,context,context_instance = RequestContext(request),)

def post(self,**kwargs):
    post_logic_return = self.post_logic(request,**kwargs)
    if post_logic_return[0] == 'redirect':
        return post_logic_return[1]
    if post_logic_return[0] == 'context':
        context = post_logic_return[1]
        return render_to_response(
            self.template,)

..表单模板已包含在我的问题中：ajax_form_modal_result_div,您只需要提供formUpdateURL.我是通过模板完成的,现在我写这篇文章似乎很奇怪.可以通过视图上下文轻松提供.

Voila – 带有Bootstrap模式的Django表单！增加你的UI！

我希望这有助于某人解决类似的问题.