2016-03-15 91 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