如何使用从 getJson 单击事件（从 href 触发）返回的数据填充模态主体？

Question

我根据查询的数据动态建表。 在此表的一部分中，我还从查询的部分构建 URL，以通过 API 调用从其他来源获取额外数据。 我的目标是允许用户单击一个图标，这将触发对端点的 getJson 调用并在模式中显示该数据。 我的模态构建得很好。 每个图标都有一个动态生成的 URL，这很好。 我只是无法让返回的 json 显示在 modal-body div 中。 重要的是 getJson 只有在用户点击图标时才会被触发，因为有多个端点，我不想在初始创建时构建整个页面，因为每条记录都需要许多单独的查询，而用户可能不想要所有的信息。我有多个工作版本：一个在生成时构建和查询所有数据，这非常低效，另一个通过 Python 函数获取内容，但需要服务器到客户端，这也是低效的，所以我试图将它单独放在客户端。 我已经通读了 - 为 jQuery AJAX 调用实现加载指示器并在加载内容后显示引导模式，但没有从中得到我的答案。 例子：

<!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>

谢谢你的帮助。

Answer 1

这段代码对你有用

<!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>

如何使用从 getJson 单击事件（从 href 触发）返回的数据填充模态主体？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-24 17:50:28

如何使用从 getJson 单击事件（从 href 触发）返回的数据填充模态主体？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-24 17:50:28

解决方案1
1 已采纳 2019-11-24 17:50:28