时间戳

首页 > 解决方案 > 如何在 Popup 中显示 Ajax 响应数据？

django - 如何在 Popup 中显示 Ajax 响应数据？

问题描述

我有一些数据，response但我想在弹出窗口中显示该数据，请告诉我如何在弹出窗口中显示 Ajax 数据。

这是我的views.py文件...

def myview(request):
   datas=TestForm.objects.all
   template_name='test.html'
   context={'datas':datas}
   return render(request, template_name, context)

def myview(request, id):
   display=TestForm.objects.get(pk=id)
   template_name='test.html'
   context={'display':display}
   return render(request, template_name, context)

这是我的html文件...

{% for a in datas %}
<a href="javascript:void()" class="btn btn-primary" onclick"exampleModal({{a.id)}})" data-url="{% url 'myap:list_single' a.id %}">
  {{a.product_id}}
   </button>
  {% endfor %}

这是我的popup代码...我想在哪里显示 AJAX 数据...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">&times;</span>
      </button>
      </div>
       <div class="modal-body">
         <tr>
            <td>{{datas.name}}</td>
            <td>{{datas.price}}</td>
            <td>{{datas.category}}</td>
         </tr>
        </div>
         <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
      </div>
       </div>

这是我的AJAX代码...

function exampleModal(id){
  $.ajax({
  url: $(this).attr("data-url")
   type: 'get',
   dataType: "HTML" 
   success: function(res) {
   $('.exampleModal').html(res);
   $("#exampleModal").modal("show");
    }
  });
  }

标签： djangoajaxdjango-viewsdjango-templatesdjango-ajax-selects

解决方案

function exampleModal(id){
  $.ajax({
  url: $(this).attr("data-url")
   type: 'get',
   dataType: "HTML" 
   success: function(res) {
     $('#exampleModal .modal-body').html(res); //here is where the response is added to the body element of the modal
     $("#exampleModal").modal("show");
   }
  });
}

推荐阅读