通过单击将数据(例如sportsbook API)传递到Bootstrap Modal

Question

初级开发人员。我正在开发一个MLB体育数据/体育线路web应用程序。我现在正在做这个设计。问题是，是否有可能将应用程序接口数据(例如，BetData应用程序接口)传递给单击时的模式(jQuery)。

如果我需要澄清，请告诉我。

Answer 1

是的，这是可能的，只需创建一个如下所示的模式

<div class="modal fade bd-example-modal-lg" tabindex="-1" id="PreviewModal"role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="PreviewTitle">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" id="PreviewBody">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>                    
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
                </div>
            </div>
        </div>
    </div>

然后创建一个链接到js函数的btn，并在该函数中包含从API获取数据的内容，如

$.ajax{
 url : THE URL FOR YOUR API,
 success : function(data){
  $("#PreviewBody").html(JSON.stringify(data))
}
}

然后，一旦您验证了数据，即确保所有数据都是正确的，并且与您需要的内容相匹配，那么只需使用jquery将数据插入到您的模式中，例如

该按钮可以像下面这样简单

<button onclick="JSFunc()">Press Me</button>


function JSFunc(){
  $('#PreviewModal').modal('show');
}

在调用modal('show')命令之前，模式不会显示，并且不必通过默认设置隐藏