Django AJAX 模态未显示

问：

我正在尝试使用 ajax 在按钮单击时显示模式形式，但单击后屏幕上没有显示任何内容。屏幕变为灰色，因此触发了模态，但在页面顶部的小灰线旁边，没有其他显示。控制台也没有错误，从我的角度来看，它必须是带有显示的东西。

JS 函数。奇怪的是，hrml_form显示为未解析的变量，也许这就是问题所在？

$(function() {

 $('.js-create-book').click(function() {
   $.ajax({
     url: '/patients/create/',
     type: 'get',
     dataType: 'json',
     beforeSend: function () {
       $("#modal-book").modal("show");
     },
     success: function (data) {
       $("#modal-book .modal-content").html(data.html_form);
     }
   });
 });

});

forms.py 文件

from django import forms
from .models import Patients


class PatientForm(forms.ModelForm):
    class Meta:
        model = Patients
        fields = ('name', 'surname', 'gender', 'birth_date', 'pesel', 'phone', 'email')

views.py

def patients_create(request):
    form = PatientForm()
    context = {'form': form}
    html_form = render_to_string('dental/partial_patient_create.html',
                                 context,
                                 request=request)
    return JsonResponse({'html_form': html_form})

partial_patient_create.html

{% load widget_tweaks %}

<form method="post">
  {% csrf_token %}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Create a new book</h4>
  </div>
  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} has-error{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Create book</button>
  </div>
</form>

患者.html

{% extends 'dental/base_layout.html' %} {% load static %}
     {% include "route to the HTML containing the modal" %}
{% block content %}
<div class="page-content p-5" id="content">

    <h1 class="page-header">Patients</h1>

    <p>
    <button type="button" class="btn btn-primary js-create-book">
        <span class="glypicon glypicon-plus"></span>
        New Patient
    </button>
    </p>

    <table id="patients" class="table", style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Gender</th>
            <th>Birth Date</th>
            <th>PESEL</th>
            <th>Phone</th>
            <th>E-Mail</th>

        </tr>
    </thead>
    <tbody>
    {% for patient in patient_list %}
    <tr>
        <td>{{ patient.name }}</td>
        <td>{{ patient.surname}}</td>
        <td>{{ patient.gender}}</td>
        <td>{{ patient.birth_date}}</td>
        <td>{{ patient.pesel}}</td>
        <td>{{ patient.phone}}</td>
        <td>{{ patient.email}}</td>

    </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center bg-warning">No book</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

    <div class="modal fade" id="modal-book">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
    </div>
</div>
{% endblock %}

我将非常感谢任何形式的帮助。 谢谢