将JSON数据加载到Bootstrap模式中

我想加载一个JSON文件，在Bootstrap模式中创建一个列表。 我把它设置在哪里，如果你点击一个人的图片，模式会弹出。

   
Kenneth Atkins
 
[Description here]
   

以下是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

方法1：使用Ajax

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

HTML

 
 
   
Kenneth Atkins
 
[Description here]
  
  

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 = '
title: '+data.first_name+'
age: '+data.age+'
'; infoModal.find('.modal-body').html(htmlData); infoModal.modal('show'); } }); return false; }); })(jQuery); 

方法2：使用隐藏的div

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

HTML

 
 
   
Kenneth Atkins
 
[Description here]
 
 
 
title: Atkins Kenneth
 
Age: 16
 
 
  
  

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);