Question

我已经创建了一个提示。提示的所有结构都是使用HTML。

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

标题，内容和页脚数据将从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>

此提示的高度也很长。有什么帮助吗？

Answer 1

1）进行json调用

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

2）确保你给div提供id并将html绑定到那个id 比如#contenttab

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

3）通常json应该返回部分视图或某些html页面

Answer 2

最初使用模拟数据，比如make一个包含json数据的文件并使用

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

在dev

中工作时将localhost设为true

使用json填充提示内容

2 个答案: