XML 文件到 HTML 表 JQuery/AJAX（引导程序）

Question

我被分配了一项任务，但我不知道如何...我最近收到了一个模板，您可以从 wrapbootstrap 购买该模板，并被要求将 xml 文件中的数据填充到 HTML 中的表中.我已经研究/谷歌搜索了好几天，但仍然无法弄清楚..

JQUERY/AJAX

$(document).ready(function () {
  $.ajax({
      type: "GET",
      url: "/test/testxml.xml",
      dataType: "xml",
      success: function (xml) {
          $(xml).find("datadump").each(function () {

              var User = $(this).find("User").text();
              var Value_1 = $(this).find("Value_1").text();
              var Value_2 = $(this).find("Value_2").text();
              var Value_3(this).find("Value_3").text();
          $('<tr></tr>').html('<td>'+Value_1+'</td><td>'+Value_2+'</td><td>'+Value_3+'</td>').appendTo('#data1');
          });
      }
  });

}

HTML 代码（模板 WRAPBOOTSTRAP）

</div>
        <div class="row">
            <!-- begin panel -->
            <div class="col-md-7">
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h4 class="panel-title">Performance</h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                        <table id="data1 "class="table table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Value 1</th>
                                    <th>Value 2</th>
                                    <th>Value 3</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Username</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                </tr>
                                <tr>
                                    <td>Username</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                </tr>
                                <tr>
                                    <td>Username</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                    <td>Value</td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
</div>

XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<datadump>
<Info User="Bob" Value_1="23" Value_2="122" Value_3="45"/>
<Info User="Michael" Value_1="223" Value_2="162" Value_3="64"/>
<Info User="William" Value_1="23" Value_2="1" Value_3="45"/>
<Info User="Jeff" Value_1="23" Value_2="23" Value_3="45"/>
</datadump>

任何帮助将不胜感激。非常感谢

Answer 1

你必须在ajax调用的成功函数中获取数据并解析xml 在此函数中，您可以在从 xml 获取数据时将值放入表结构中。

请看下面的例子：

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "sites.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('site').each(function() {
                var id = $(this).attr('id');
                var title = $(this).find('title').text();
                var url = $(this).find('url').text();
                $(' ').html('' + title + '').appendTo('#page-wrap');
                $(this).find('desc').each(function() {
                    var brief = $(this).find('brief').text();
                    var long = $(this).find('long').text();
                    $(' ').html(brief).appendTo('#link_' + id);
                    $(' ').html(long).appendTo('#link_' + id);
                });
            });
        }
    });
});