如何将参数从 Javascript 函数传递给 XSLT [英] How to pass parameter to XSLT from Javascript function

查看：35
本文介绍了如何将参数从 Javascript 函数传递给 XSLT的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有一个 HTML 文件，其中包含一个 XML 解析 JavaScript 函数，该函数进而呈现 XSLT 文件.问题是，我的 XML 文件中有多个记录"，我只想要一个 XSLT 来呈现每条记录(而不是每条记录一个单独的 XSLT 文件).根据下面的代码，请有人建议我如何从包含记录 ID 的 JavaScript 传递参数(在我的 XML 文件中的每个 XML 记录中)，以便单个"XSLT 可以使用源自的正确数据解析布局参数.

HTML

<html lang="zh-cn"><头><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>天气应用</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"/><身体><div id="WeatherDetailsContainer"></div><!-- 脚本--><script src="https://code.jquery.com/jquery-2.1.1.min.js"></script><script src="../../js/materialize.js"></script><脚本>$(函数(){RenderXSLT();});函数加载XMLDoc(文件名){如果(window.ActiveXObject){xhttp = new ActiveXObject("Msxml2.XMLHTTP");} 别的 {xhttp = 新的 XMLHttpRequest();}xhttp.open("GET", 文件名, false);尝试 {xhttp.responseType = "msxml-document"} catch (err) {}//帮助 IE11xhttp.send("");返回 xhttp.responseXML;}函数 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);/** 我相信这是如何设置参数，但它没有用 **///xsltProcessor.setParameter(null, "cityname", currentLocation);resultDocument = xsltProcessor.transformToFragment(xml, document);document.getElementById("WeatherDetailsContainer").appendChild(resultDocument);}}

XML 文件

<位置><cityid>Lon</cityid><cityname>伦敦</cityname><温度>11</温度><高>13</高><低>4</低><日期>17/03/2015</日期></位置><位置><cityid>人</cityid><cityname>曼彻斯特</cityname><温度>07</温度><高>08</高><低>2</低><日期>17/03/2015</日期></位置><位置><cityid>Gla</cityid><cityname>格拉斯哥</cityname><温度>05</温度><高>06</高><低>1</低><日期>17/03/2015</日期></位置></位置>

XSLT 文件

</xsl:for-each></xsl:模板></xsl:stylesheet>

解决方案

在XSLT中你需要改变

<!-- 如何将通过 JavaScript 发送的参数值用于城市名称(代替值伦敦")--><xsl:for-each select="locations/location[cityname='London']">

到

<xsl:template match="/"><!-- 如何将通过 JavaScript 发送的参数值用于城市名称(代替值伦敦")--><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);/** 我相信这是如何设置参数，但它没有用 **///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;}

I have scoured through numerous posts that try and explain how to achieve this, however none have helped me solve the problem.

I have a HTML file which contains an XML parsing JavaScript function which in turn renders the XSLT file. The issue is, I have multiple 'records' in my XML file and I only want a single XSLT to render each of records (instead of a separate XSLT file per record). Based on the code below, please could someone advise on how I can pass a parameter from JavaScript containing the record id (in each XML record in my XML file) so that the 'single' XSLT can parse the layout with the correct data sourced from the parameter.

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 File

<?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 File

<?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>

解决方案

In the XSLT you need to change

<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']">

to

<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]">

I would also set <xsl:output method="html"/> as you are only creating a fragment of HTML and the XSLT processor does not know that if you don't set the output method.

In your Javascript code for Mozilla, Chrome, Opera I would change the check 

      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);
      }

to

      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);
      }

Your IE code with transformNode does not allow to set parameters, you will need to change that part as well, change

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

to

      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;
      }

这篇关于如何将参数从 Javascript 函数传递给 XSLT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆