如何在弹出窗口中显示Ajax响应数据？ [英] How to display Ajax response data in Popup?

问题描述

我在响应中有一些数据，但是我想在弹出窗口中显示该数据，请让我知道如何在弹出窗口中显示Ajax数据。

I have some data in response but I want to display that data in the popup, please let me know how I can display Ajax data in the popup.

这是我的 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 文件...

here is my html file...

{% 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 %}

这是我的弹出窗口代码...我想在其中分发AJAX数据...

here is my popup code...where I want to dispslay AJAX data...

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

推荐答案

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

这篇关于如何在弹出窗口中显示Ajax响应数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！