Django:在模态中使用 Ajax 显示产品详细信息数据

Posted

技术标签:

【中文标题】Django:在模态中使用 Ajax 显示产品详细信息数据【英文标题】:Django: Show product detail data using Ajax in modal 【发布时间】:2018-05-14 04:58:42 【问题描述】:

我的应用程序的用例是在主页中显示家具列表。所有这些家具都有快速预览按钮,单击时应显示其详细信息。我试图为此使用ajax。 如果我单击家具快速预览按钮,我会得到单击的家具信息,我从中进行查询并获取家具详细信息。至此,它的工作和模态都显示了,但无法显示内容。我现在如何在模态正文中显示内容?

这是我尝试过的

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>

【问题讨论】:

您目前的状态是什么?你有什么错误吗? 您在 Ajax 响应中发送的数据中没有任何名为“html”的内容。您是否想在该视图中呈现模板? 【参考方案1】:

这样做的一种巧妙方法是使用 sn-p html 获取产品详细信息,并使用 render_to_string 发送产品详细信息 html sn-p,然后在模态中替换该 html sn-p。

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);

【讨论】:

它只是一个 html 文件,在您的情况下,它是 HTML 的一部分,以模态显示产品详细信息。只需使用 render_to_string 并在视图本身中处理 HTML 并将这个 html 字符串作为响应传递给 AJAX,最后像我上面所做的那样进行替换。

以上是关于Django:在模态中使用 Ajax 显示产品详细信息数据的主要内容,如果未能解决你的问题,请参考以下文章

从 Django 模型中使用 Ajax 获取模态数据

Django + ajax + 模态表单 bootstrap5.如何让它发挥作用?

如何获取模态中的数据ID,然后将其传递给ajax?

我想在购物车中添加产品而不用 AJAX 和 Django 刷新页面

Django Ajax Likes 工作不正确:jQuery 的问题

如何构建 django ajax 模态弹出表单(带有服务器端表单)?