【问题标题】:How to display Ajax response data in Popup?如何在 Popup 中显示 Ajax 响应数据?
【发布时间】:2021-01-09 04:57:34
【问题描述】:

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

【问题讨论】:

  • 那里到底有什么问题?您的 ajax 请求是否返回 HTTP 200?您是否在 Python 或浏览器控制台中遇到任何错误?您可以将其添加到问题中吗?
  • 你是从后端返回 html 吗?
  • 考虑将问题标题编辑为 How to display Ajax response data in Bootstrap4 Modal? 因为弹出窗口可能会与弹出窗口 (getbootstrap.com/docs/4.0/components/popovers) 以及您在代码中使用的内容混淆是模态的 (getbootstrap.com/docs/4.0/components/modal)

标签: django ajax django-views django-templates django-ajax-selects


【解决方案1】:
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 中传递 csrf_token,我想使用 POST 方法
  • 通常卡令牌来自服务器,您将其作为隐藏字段添加到表单中。发布时,您使用框架期望的变量名称发送该值。不知道 django 的细节。但是,如果您正在获取产品的详细信息,这应该是一个 GET 请求,因为您没有修改数据。当您更改(创建/更新/删除)数据时使用 POST
  • 我在formAJAX 中传递了POST 方法,这里是GET 方法,所以我的表单没有更新,它给了我一个csrf_token 问题。 ..
  • 你为什么使用 POST 而不是 GET?
猜你喜欢
  • 2020-08-20
  • 2013-11-15
  • 2014-12-26
  • 2020-10-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-27
相关资源
最近更新 更多