2016-03-15 94 views
-1

我已经创建了一个提示。提示的所有结构均使用HTML使用json填充提示内容

我想从json文件中填写html中的所有内容。

标题,内容和页脚数据将从json文件中获取。

在代码中,我直接在页眉,中间体和页脚中添加了内容...我想从json文件中提取内容。

代码:

<html> 
    <head> 
     <title>Test</title> 
     <style> 
      .container{width:500px; height:100%;border:1px solid grey;margin:20px;position:relative;} 
      .header{background-color:#00CDCD;height:50px;border:1px solid white;} 
      h1{margin-top:0;color:#ffffff;margin:5px 12px;} 
      .footer{background-color: #cecece; bottom: 0; height: 50px; left: 0; position: absolute; width: 100%;text-align:center;} 
      button{margin-top:12px;} 
      .content{height:auto;position:absolute;overflow:auto;margin:10px;} 
     </style> 

     <script></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"> 
       <h1>Header</h1> 
      </div> 
      <div class="content"> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
      </div> 
      <div class="footer"> 
       <button>Button 1</button> 
       <button>Button 2</button> 
       <button>button 3</button> 
      </div> 
     </div> 
    </body> 
</html> 

另外提示的高度拉伸长。任何帮助?

+0

工作什么你试过这么远吗? –

+0

对不起,但我不是json的家庭成员,也没有使用它...所以无法开始工作。我找不到在json文件中创建对象的方法 – LearnerS

+0

如何在json文件中创建对象 – LearnerS

回答

0

1)做一个JSON调用

$.ajax({ 
     url: link, 
     success: function (result) { 
      $('.content').html(result);// Append the html to the div 
     } 
    }); 

2)确保你给的id到div和HTML绑定到该ID 像#contenttab

$('#contenttab').html(result); 

3)通常JSON应返回一个局部视图或一些HTML页面

+0

json文件如何? – LearnerS

0

最初与嘲笑的数据一起工作,比如说创建一个包含json数据的文件,并在其上工作

$.ajax({ 
    url: window.localhost?localfileURl:actualUrl 
    success: function(){ 
    $(".content").html(result); 
    } 
}) 

使本地主机为true,当你在开发

+0

如何在此使用对象创建json文件 – LearnerS

+0

将jsonObject存储在具有.json扩展名的文件中 – Joseph

+0

JSON文件将包含什么内容? – LearnerS