将 JSON 数据加载到 Bootstrap 模式中

Question

我想加载一个 JSON 文件，该文件在 Bootstrap Modal 内创建一个列表。我已经设置了，如果您单击某个人的图片，就会弹出模式。

<li class="project span3" data-type="pfa">
    <a data-toggle="modal" data-target="#myModal" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
    </a>     
</li>

这是 JSON 数据的示例：

    var florida_exoneration = [
  {
    "last_name":"Atkins",
    "first_name":"Kenneth",
    "age":16,
    "race":"Caucasian",
    "state":"FL",
    "crime":"Sexual Assault",
    "sentence":"10 years",
    "conviction":2004,
    "exonerated":2008,
    "dna":"",
    "mistaken witness identification":"",
    "false confession":"",
    "perjury/false accusation":"Y",
    "false evidence":"",
    "official misconduct":"",
    "inadequate legal defense":"",
    "compensation":""
  }  
]

我希望模态在框中显示类似这样的内容：

Title = "first_name + last_name"
Age = "age"
Race = "race"
State = "state"
""
""

我还想确保数据与图片相关联，这样模态就不会混淆。如果这有点令人困惑，我很抱歉。如果有人有任何疑问，我会尽力澄清。

Answer 1

方法一：使用Ajax

每次用户单击图像时，您都会从单击的图像中获取 id，然后向服务器发送 Ajax 请求以获取 JSON 对象。

HTML

<ul>
    <li class="project span3" data-type="pfa">
    <a href="#" data-id="2" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
    </a>     
    </li>
</ul>

JavaScript

(function($) {
    var infoModal = $('#myModal');
    $('.thumbnail').on('click', function(){
        $.ajax({ 
          type: "GET", 
          url: 'getJson.php?id='+$(this).data('id'),
          dataType: 'json',
          success: function(data){ 
            htmlData = '<ul><li>title: '+data.first_name+'</li><li>age: '+data.age+'</li></ul>';
            infoModal.find('.modal-body').html(htmlData);
            infoModal.modal('show');
          }
        });

        return false;
    });
})(jQuery);

方法二：使用隐藏div

不需要任何Ajax请求，但你需要创建一个隐藏的div，其中包含你想要在模态中显示的所有信息

HTML

<ul>
    <li class="project span3" data-type="pfa">
    <a href="#" class="thumbnail">
        <img src="img/anon.jpg" alt="Kenneth Atkins" />
        <h1>Kenneth Atkins</h1>
        <p>[Description here]</p>
        <div class="profile hide">
            <ul>
                <li>title: Atkins Kenneth</li>
                <li>Age: 16</li>
            </ul>
        </div>
    </a>     
    </li>
</ul>

JavaScript

(function($) {
    var infoModal = $('#myModal');
    $('.thumbnail').on('click', function(){
        htmlData = $(this).find('.profile').html();
        infoModal.find('.modal-body').html(htmlData);
        infoModal.modal('show');
        return false;
    });
})(jQuery);

Answer 2

我遇到了这个问题，这是因为我没有所需的“数据”包装器。

将您的 JSON 包裹在其中：

{ 
    "data": [
{your app data here},...{}
]}

一旦我这样做了，问题就解决了。