堆栈内存溢出
  繁体   English   中英

如何从Javascript函数将参数传递给XSLT

[英]How to pass parameter to XSLT from Javascript function

 原文  2015-03-18 14:16:18  6   2    javascript/ html/ xml/ xslt/ xml-parsing

问题描述

我浏览了许多帖子，试图解释如何实现这一目标，但是没有一个可以帮助我解决问题。

我有一个HTML文件，其中包含XML解析JavaScript函数，该函数又呈现XSLT文件。 问题是，我的XML文件中有多个“记录”，我只希望一个XSLT呈现每个记录（而不是每个记录一个单独的XSLT文件）。 根据下面的代码，请有人建议我如何从包含记录ID（在我的XML文件的每个XML记录中）的JavaScript中传递参数，以便“单个” XSLT可以使用来自以下位置的正确数据解析布局参数。

的HTML 

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
      <title>Weather App</title>

      <link href="../../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
      <link href="../../css/animate.css" type="text/css" rel="stylesheet" />
      <link href="../../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    </head>

    <body>

      <div id="WeatherDetailsContainer"></div>

      <!--  Scripts-->
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="../../js/materialize.js"></script>

      <script>

        $(function(){
          RenderXSLT();
        });

        function loadXMLDoc(filename) {
          if (window.ActiveXObject) {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
          } else {
            xhttp = new XMLHttpRequest();
          }
          xhttp.open("GET", filename, false);
          try {
            xhttp.responseType = "msxml-document"
          } catch (err) {} // Helping IE11
          xhttp.send("");
          return xhttp.responseXML;
        }

        function RenderXSLT() {
          xml = loadXMLDoc("datastore/Weather.xml");
          xslt = loadXMLDoc("transformations/WeatherDetailsCard.xslt");
          var currentLocation = localStorage.getItem('current_weather_location');

          if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
            ex = xml.transformNode(xslt);
            document.getElementById("WeatherDetailsContainer").innerHTML = ex;
          }
          else if (document.implementation && document.implementation.createDocument) {
            xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xslt);

            /** I believe this is how to set the param, but it didn't work **/
            //xsltProcessor.setParameter(null, "cityname", currentLocation);

            resultDocument = xsltProcessor.transformToFragment(xml, document);
            document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
          }
        }
      </script>

    </body>
    </html>

XML文件 

<?xml version="1.0" encoding="UTF-8" ?>
<locations>

  <location>
    <cityid>Lon</cityid>
    <cityname>London</cityname>
    <temperature>11</temperature>
    <high>13</high>
    <low>4</low>
    <date>17/03/2015</date>
  </location>

  <location>
    <cityid>Man</cityid>
    <cityname>Manchester</cityname>
    <temperature>07</temperature>
    <high>08</high>
    <low>2</low>
    <date>17/03/2015</date>
  </location>

  <location>
    <cityid>Gla</cityid>
    <cityname>Glasgow</cityname>
    <temperature>05</temperature>
    <high>06</high>
    <low>1</low>
    <date>17/03/2015</date>
  </location>

</locations>

XSLT文件 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname='London']">

      <div class="section">
        <div class="container">
          <div class="row">
            <div class="col s4 m4 l4">
              <div class="card-panel z-depth-3 animated fadeInUp" style="padding:10px 10px 5px 10px !important;">
                <span class="center-align">
                  <h5><xsl:value-of select="cityname"/></h5><span> (<xsl:value-of select="cityid"/>)</span>
                </span>
                <p>Temp: <xsl:value-of select="temperature"/></p>
                <p>High: <xsl:value-of select="high"/></p>
                <p>Low: <xsl:value-of select="low"/></p>                
              </div>
            </div>
          </div>
        </div>
      </div>

    </xsl:for-each>

</xsl:template>
</xsl:stylesheet>

2 个解决方案

解决方案1
 5 已采纳  2015-03-18 14:34:00

在XSLT中，您需要进行更改 

<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname='London']">

至 

<xsl:param name="cityname"/>

<xsl:template match="/">

    <!-- How do I use the value of the parameter sent via JavaScript for the cityname (in place of value 'London') -->
    <xsl:for-each select="locations/location[cityname = $cityname]">

我还将设置<xsl:output method="html"/>因为您仅创建HTML片段，而XSLT处理器不知道是否不设置输出方法。

在Mozilla，Chrome，Opera的Javascript代码中，我将更改支票 

      else if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslt);

        /** I believe this is how to set the param, but it didn't work **/
        //xsltProcessor.setParameter(null, "cityname", currentLocation);

        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);
      }

至 

      else if (typeof XSLTProcessor !== 'undefined') {
        var xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslt);


        xsltProcessor.setParameter(null, "cityname", currentLocation);

        var resultFragment = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("WeatherDetailsContainer").appendChild(resultFragment);
      }

您的带有transformNode IE代码不允许设置参数，您还需要更改该部分，然后更改 

      if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        ex = xml.transformNode(xslt);
        document.getElementById("WeatherDetailsContainer").innerHTML = ex;
      }

至 

      if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
        var template = new ActiveXObject('Msxml2.XslTemplate');
        template.stylesheet = xslt;
        var proc = template.createProcessor();
        proc.input = xml;
        proc.addParameter('cityname', currentLocation);
        proc.transform();
        document.getElementById("WeatherDetailsContainer").innerHTML = proc.output;
      }

解决方案2
 1  2015-03-18 14:33:12

看起来您的Javascript中具有用于传递参数的正确代码，但是还必须编写XSLT来接受参数： 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <!-- Declare it here -->
  <xsl:param name="cityName" />

  <xsl:template match="/">
    <!--                                 use it here ------v   -->
    <xsl:for-each select="locations/location[cityname = $cityName]">

      ...

    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将参数从javascript传递到Ajax函数 JavaScript如何将参数传递给函数 如何将参数传递给javascript函数 如何在JavaScript函数中传递参数 如何从Kendo将参数传递给javascript函数<a href=“”></a> 如何将运行时参数从html代码传递到javascript函数 如何从文本字段中获取文本并将其作为参数传递给javascript函数 如何将匿名函数作为参数从javascript传递到webkit上的c ++？ 如何将字符串值从html作为函数参数传递给javascript？ 如何从html调用javascript函数并通过它传递参数
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM