Question

我有这个HTML

    <div class="searchresults">
    <div class="result">
        <!-- document ISO number -->
        <h4><a class="published" href="#">ISO 105-A05:1996</a></h4>
        <!-- document title -->
        <p>
            Textiles -- Tests for colour fastness -- Part A05: Instrumental assessment of change in colour for determination of grey scale rating
        </p>
        <h2 class="toggle">More details<span></span></h2>
        <div class="more_details clearfix">
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Edition</th>
                    <th>Stage</th>
                    <th>TC</th>
                    <th>ICS</th>
                    <th>Document available as of</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>90.93</td>
                    <td><a href="#">ISO/TC 38/SC 1</a></td>
                    <td><a href="#">59.080.01</a></td>
                    <td>1996-03-28</td>
                </tr>
            </table>
        </div>  
    </div>  <!--result /--> 
</div>

如果是正常的JSP我可以获取列表并迭代div并获取结果，如此

    <div class="searchresults">
    <%
    for(List lists:list) {
    %>
    <div class="result">
        <!-- document ISO number -->
        <h4><a class="published" href="#">ISO 105-A05:1996</a></h4>
        <!-- document title -->
        <p>
            Textiles -- Tests for colour fastness -- Part A05: Instrumental assessment of change in colour for determination of grey scale rating
        </p>
        <h2 class="toggle">More details<span></span></h2>
        <div class="more_details clearfix">
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Edition</th>
                    <th>Stage</th>
                    <th>TC</th>
                    <th>ICS</th>
                    <th>Document available as of</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>90.93</td>
                    <td><a href="#">ISO/TC 38/SC 1</a></td>
                    <td><a href="#">59.080.01</a></td>
                    <td>1996-03-28</td>
                </tr>
            </table>
        </div>  
    </div>  <!--result /--> 
    <%
     }
     %>
</div>

但在我的情况下我正在进行ajax调用并获取JSON数组如何使用JSON数据迭代div如上所示并填充表我应该在ajax调用的onccess上调用什么？

Answer 1

在jQuery's website上很容易找到如何进行AJAX调用，所以我将跳过它。我也将假设您将使用JSON作为服务器的结果。

你可以做的是使用模板库，我将在这个例子中使用handlebars.js。

首先使用特殊脚本代码从上方获取结果HTML并将其用作模板。

<script id="results" type="text/x-handlebars-template"> 
 ... notice the double braces ...
       <h4><a class="published" href="#">ISO {{published}}</a></h4>
</script>

用把手的双括号替换所有动态的物品，这些物品将来自你的AJAX召唤。

现在，您将获取AJAX结果集并将其放入本地数组中。在您的页面中，获取将添加数据的html元素。

  <div id="replacement"></div>

现在迭代本地结果集中的每个项目，并使用项目数据填写您之前设置的模板化变量。继续将模板化HTML元素添加到占位符。完成后，您现在可以将创建的模板设置为替换元素。

// define the source of your template and complie for use.
var source = document.getElementById('results').innerHTML;
var template = Handlebars.compile(source);

// faked AJAX results set  
var resultSet=[ {
  published: '105-A05:1996',
  title: "Textiles -- Tests for colour fastness -- Part A05:
          Instrumental assessment of change in colour for 
          determination of grey scale rating",
  Edition: '1',
  Stage: "90.93",
  TC: 'ISO/TC 38/SC 1',
  ICS: '59.080.01',
  available: '1996-03-28'
}

var appendedHtml = '';
// get the element where you will add your data.
var element = document.getElementById('replacement');    

// iterate over each entry from your data
resultSet.forEach(function(entry) {
  // the entey data now will fill in the templated variables
   var html = template(entry);
   // keep adding the html elements to a placeholder.
   appendedHtml += html
});

// now set the created templates to the replacement element.
element.innerHTML = appendedHtml;

这是一个working Plunker供您查看。这应该足以让你上去。此解决方案有两个关键，使用模板库进行数据替换，并迭代结果以创建同一模板的多个副本。

祝你好运，希望这对一些人有所帮助。

需要在HTML表中填充JSON数组数据

1 个答案: