Javascript Django：在模式中使用Ajax显示产品详细信息数据

我的应用程序的用例是在主页中显示家具列表。所有这些家具中都有快速预览按钮，单击该按钮时应显示其详细信息。我尝试使用ajax来实现这一点。 如果单击“家具快速预览”按钮，我将获得单击的家具slug，从中进行查询并获取家具详细信息。到目前为止，它的工作，也模态显示，但不能显示内容。现在如何在模态体中显示内容

这是我试过的

def ajax_furniture_detail(request):
    furniture_slug = request.GET.get('slug', None)
    qs = Furniture.objects.get(slug=furniture_slug)
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    context = {
    'furniture': model_to_dict(qs),
    'cart': model_to_dict(cart_obj),
    'status': 'ok'
    }
    return JsonResponse(context)

{% block content %}
  {% include 'furnitures/furnitures_home.html'%}
{% endblock content %}
{% block js %}
  {{ block.super }}
  <script>
    $(document).ready(function(){
        $('.quick-view-button').click(function() {
          var _this = $(this);
          var slug = _this.attr("data-slug");
          $.ajax({
            url: '/ajax/furniture',
            type: "get",
            data: {'slug': slug},
            success: function(data) {
              $('#product-quick-view-modal').modal('show');
              $('#product-quick-view-modal').find('.modal-body').html(data.html);
            },
            error: function(err) {
              console.log('error', err);
            }
          })
        })
    });
  </script>
{% endblock js %}


furnitures_home.html 

{% load static %}
<div class="furnitures" id="content">
    {% for furniture in furnitures %}
      {% if forloop.first %}<div class="row products">{% endif %}
      <div class="col-md-4 col-sm-3">
        <div class="product">
          <div class="image" style="height: 205px;">
            <div class="quick-view-button" data-slug={{ furniture.slug }}>
                <a href="#" data-toggle="modal" data-target="#product-quick-view-modal" class="btn btn-default btn-sm">Quick view</a>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
</div>

<div class="modal fade" id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <p>Hello</p>
            <p>{{furniture.name}}</p>
         </div>
      </div>
   </div>
   <!--/.modal-dialog-->
</div>

def ajax_家具_细节（请求）：
家具\u slug=request.GET.GET（'slug'，无）
qs=Furniture.objects.get（slug=Furniture\u slug）
cart\u obj，new\u obj=cart.objects.new\u或\u get（请求）
上下文={
“家具”：型号（qs），
“购物车”：模型到目录（购物车对象），
“状态”：“确定”
}
返回JsonResponse（上下文）
{%block content%}
{%include'furnitures/furnitures\u home.html%}
{%endblock内容%}
{%block js%}
{{block.super}}
$（文档）.ready（函数（）{
$（'.quick view按钮'）。单击（函数（）{
var_this=$（this）；
var slug=_this.attr（“数据slug”）；
$.ajax({
url:“/ajax/furniture”，
键入：“获取”，
数据：{'slug'：slug}，
成功：功能（数据）{
$（“#产品快速查看模式”）.model（'show'）；
$（“#产品快速查看模式”）.find（“.modal body”）.html（data.html）；
},
错误：函数（err）{
console.log（'error'，err）；
}
})
})
});
{%endblock js%}
furnitures_home.html
{%load static%}
{%家具中的家具%}
{%if-forloop.first%}{%endif%}
{%endif%}
{%endfor%}
×
你好

{{furniture.name}

一种简洁的方法是使用html代码段作为产品详细信息，并使用发送产品详细信息html代码段，然后在模式中替换该html代码段

rendered = render_to_string('product_detail_snippet.html', context, 
                       context_instance=RequestContext(request))
return JsonResponse({'product_snippet': rendered})

在ajax的成功中：

$('#product-quick-view-modal').find('.modal-body').html(data.product_snippet);

---

你目前的状况如何？您是否收到任何错误？在Ajax响应中发送的数据中没有任何称为“html”的内容。您是否希望在该视图中呈现一个模板？它只是一个html文件，在您的例子中是html中以模态显示产品详细信息的部分。只需使用render_to_字符串，在视图中处理HTML本身，并将此HTML字符串作为响应传递给AJAX，最后按照上面的步骤进行替换。