如何加载带有动态内容的html页面？答案

【问题标题】：How to load html page with dynamic content?如何加载带有动态内容的html页面？
【发布时间】：2015-09-02 14:58:35
【问题描述】：

我正在尝试加载一个使用 Jquery getJSON() 函数读取 json 文件的 html 页面。

sample.html

    <html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/modules/heatmap.js"></script>
    <script>

   $(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'heatmap',
            zoomType:'x',
            plotWidth:400,
            plotHeight:400
        },
          title: {
            text: ''
        },

        xAxis: {
            categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235']
        },

        yAxis: {
            categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235'],
            title: null
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        plotOptions:{
                   series:{
                          turboThreshold: 0
                          }
        },
        series: [{}]
    };

    $.getJSON('sample2.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});

    </script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div>
</body>
</html>

sample2.json

[[1, 2, 1],
[2, 3, 1],
[3, 4, 0.9],
[4, 5, 0.7],
[5, 6, 0.9],
[1, 3, 0.1],
[2, 4, 0.3],
[3, 5, 0.4],
[4, 6, 0.8],
[1, 4, 1],
[2, 5, 0.9],
[3, 6, 0.8],
[1, 5, 0.9],
[2, 6, 0.6],
[1, 6, 0.1]
]

index.html

     <html> 
      <script> 
         $(function(){ $("#plots-tabs-C").load("sample.html");   });       </script> 
    <body> 
      <div id="plots-tabs" class="plots-tabs" style="padding-top: 10px; padding-bottom: 10px"> 


      <ul id="plots-tabs-header" class="plots-tabs-header"> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-A">PLOT A</a></li> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-B">PLOT B</a></li> 
          <li class="plots-tabs-tab"><a href="#plots-tabs-C">PLOT C</a></li> 
      </ul>  

      <div id="plots-tabs-body" class="plots-tabs-body"> <div id="plots-tabs-A"  class="plots-tabs-body-content" style="margin: 0px; padding: 0px;">    </div>      
      <div id="plots-tabs-B" class="plots-tabs-body-content"></div> 
      <div id="plots-tabs-C" class="plots-tabs-body-content"></div> 
     </div> 
    </div>
  </body> 
  </html>

但是在单击 PLOT C 时，它不会自动加载数据（sample2.json）。我该如何解决这个问题？

【问题讨论】：

您没有任何代码表明您单击 PLOT C.
如果每个选项卡被分开，当你在它们之间切换时，你每次都初始化新图表或者它是什么样子的？你能在 jsfiddle.net 上设置工作演示吗？

标签： javascript jquery html json highcharts

【解决方案1】：

您可以尝试将您的加载调用包装在点击事件中：

$("#plots-tabs-C").click( function(){ $("#plots-tabs-C").load("sample.html");   } );

另外，看起来你有一个额外的 div 关闭标签在你的 index.html 中。

【讨论】：

它似乎在我的应用程序中不起作用。