使用 jquery 从 xsl 转换刷新表格内容答案

【问题标题】：Refresh table content from xsl transform using jquery使用 jquery 从 xsl 转换刷新表格内容
【发布时间】：2016-06-25 12:35:23
【问题描述】：

我正在尝试使用 xsl 转换从 xml 服务状态更新数据并将数据附加到表中。
如您所见，我使用xsl:value-of 从 xml 文件中提取所需的数据。该数据随时间变化，因此最终会发生变化。

这是一个示例表格格式

我尝试使用.load() jquery 函数，但它没有产生预期的效果，它使用来自svc:data1 的数据破坏了表结构。

我想要的是在不刷新页面的情况下使用 xsl 转换接收到的数据更新表格的每个单元格。有什么想法吗？

xsl:variable 可以帮助将数据存储在另一个地方吗？

示例代码：

<header>
  <script>
    function autoRefresh()
    {
      <!-- do something here -->
      $("#tbl").load(window.location.href);
    }

    setInterval('autoRefresh()', 2000);
  </script>
</header>

<body onLoad="autoRefresh()">
  <table id="tbl" border="1">
    <tr>
      <td>
        <b>Text1</b>
        <p>
          <xsl:value-of select="svc:data1"/>
        </p>
      </td>
      <td>
        <b>Text2</b>
        <p>
          <xsl:value-of select="svc:data2"/>
        </p>
      </td>
      <td>
        <b>Text3</b>
        <p>
          <xsl:value-of select="svc:data3"/>
        </p>
      </td>
    </tr>
  </table>
</body>

【问题讨论】：

在我看来，您需要使用 XHR 技术来更新页面的各个部分。有无数种方法可以做到这一点，我不知道 XSLT 是否适合这项工作。我的第一个猜测是改用 JSON。
@Abel XHR 是我认为可以使用的另一个可能选项，也许它会更容易，idk。我需要强制使用 XML-XSLT，所以 JSON 不是解决方案。感谢您的评论。

标签： jquery html xml xslt

【解决方案1】：

起初，我认为您不需要刷新页面，因为 JS 是一种动态语言。只需对要更新的元素进行分类或标识：

<body onLoad="autoRefresh()">
   <table id="tbl" border="1">
       <tr>
           <td>
              <b>Text1</b>
              <p id="p1">
              </p>
           </td>
           <td>
               <b>Text2</b>
               <p id="p2">
               </p>
           </td>
           <td>
               <b>Text3</b>
               <p id="p3">
               </p>
           </td>
           </tr>
     </table>
</body>

那么你应该定期调用服务并请求数据：

<script>
     (function service() {
         $.ajax({
             url: 'ajax/test.html', 
             success: function(data) {
                  $('#p1').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
                  $('#p2').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
                  $('#p3').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
             },
             complete: function() {
                  // Schedule the next request when the current one's complete
                  setTimeout(service, 2000);
             }
         });
      })();

</script>

这里你可以看到一个周期性的ajax请求示例：

How to fire AJAX request Periodically?

【讨论】：

这只需稍作修改即可。我收到 data 作为 XmlObject 并使用 XML DOM 处理它，所以它比使用 xsl:value-of 和其他任何东西更容易。谢谢安德烈斯。