【发布时间】: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">×</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