我根据查询的数据动态构建一个表。在此表的一部分中，我还根据部分查询构建 URL，以通过 API 调用从其他来源获取其他数据。我的目标是允许用户单击一个图标，这将触发对端点的 getJson 调用并在模式中显示该数据。我的模态构建得很好。每个图标都有一个动态生成的 URL，这很好。我只是无法让返回的 json 显示在 modal-body div 中。重要的是，只有当用户单击图标时才会触发 getJson，因为有多个端点，并且我不想在初始创建时构建整个页面，因为每个记录都需要许多单独的查询，并且用户可能不想要所有信息。我有多个工作版本:一个在生成时构建和查询所有数据，这确实效率低下，另一个通过 Python 函数获取内容，但需要服务器到客户端，这也效率低下，所以我尝试将其单独放在客户端。 我已通读 - Implement a loading indicator for a jQuery AJAX call和show bootstrap modal after content is loaded但没有从他们那里得到我的答案。 示例:
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" language="javascript">
$("#fetchEvents").click(function(){
var url = "http://time.jsontest.com"
$.getJSON(url, function(eventData) {
$('.modal-body').html('<p> Events: ' + eventData + '</p>')
});
});
</script>
</head>
<body>
<h1> testing json to modal </h1>
<div class="row justify-content-center">
<a href="#events" data-toggle="modal" id="fetchEvents">
<img src="../static/img/icon-events-color.png" title="Events" style="width:22px;height:22px;">
</a>
</div>
<div id="events" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Possible Events</h4>
</div>
<div class="modal-body" id="event_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
感谢您的帮助。
最佳答案
此代码适合您
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1> testing json to modal </h1>
<div class="row justify-content-center">
<a href="#events" data-toggle="modal" id="fetchEvents">
<img src="../static/img/icon-events-color.png" title="Events" style="width:22px;height:22px;">
</a>
</div>
<div id="events" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Possible Events</h4>
</div>
<div class="modal-body" id="event_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type = "text/javascript" language="javascript">
$("#fetchEvents").click(function(){
var url = "http://time.jsontest.com"
$.getJSON(url, function(eventData) {
$('.modal-body').html('<p> Events: ' + eventData + '</p>')
});
});
</script>
</html>
关于javascript - 如何使用 getJson 单击事件(从 href 触发)返回的数据填充模式主体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59020360/