如何从Javascript函数将参数传递给XSLT [英] How to pass parameter to XSLT from Javascript function
本文介绍了如何从Javascript函数将参数传递给XSLT的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我浏览了大量的帖子，试图解释如何实现这个目标，然而没有人帮助我解决问题。
我有一个HTML文件，其中包含一个XML解析JavaScript函数，该函数依次呈现XSLT文件。问题是，在我的XML文件中有多个记录，我只希望单个XSLT呈现每个记录（而不是每个记录的单独XSLT文件）。根据下面的代码，请有人建议我如何从包含记录标识的JavaScript传递一个参数（在我的XML文件中的每个XML记录中），以便单个XSLT可以使用正确的数据来分析布局
HTML
<！DOCTYPE html>
< html lang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1.0，user-scalable = no/>
< title>天气应用程式< / title>
< link href =../../ css / materialize.csstype =text / css =stylesheetmedia =screen，projection/>
< link href =../../ css / animate.csstype =text / css =stylesheet/>
< link href =../../ css / style.csstype =text / css =stylesheetmedia =screen，projection/>
< / head>
< body>
< div id =WeatherDetailsContainer>< / div>
<！ - 脚本 - >
< 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）{} //帮助IE11
xhttp.send（）;
return 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）;
}
}
< / script>
< / body>
< / html>
XML文件
<？xml version =1.0encoding =UTF-8？>
< locations>
< location>
< cityid> Lon< / cityid>
< cityname>伦敦< / cityname>
<温度> 11< /温度>
<高> 13< /高>
< low> 4< / low>
< date> 17/03/2015< / date>
< / location>
< location>
< cityid> Man< / cityid>
< cityname>曼彻斯特< / cityname>
<温度> 07< /温度>
< high> 08< / high>
< low> 2< / low>
< date> 17/03/2015< / date>
< / location>
< location>
< cityid> Gla< / cityid>
< cityname>格拉斯哥< / cityname>
<温度> 05< /温度>
< high> 06< / high>
< low> 1< / low>
< date> 17/03/2015< / date>
< / location>
< / locations>
XSLT文件
<？xml version =1.0encoding =UTF-8？>
< xsl：stylesheet version =1.0xmlns：xsl =http://www.w3.org/1999/XSL/Transform>
< xsl：template match =/>
<！ - 如何使用通过JavaScript发送的城市名称参数的值（代替值'伦敦'） - >
< 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 fadeInUpstyle =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>高：< xsl：value-of select =high/>< / p>
< p>低：< xsl：value-of select =low/>< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
< / xsl：for-each>
< / xsl：template>
< / xsl：stylesheet>
解决方案
在XSLT中，您需要更改
< xsl：template match =/>
<！ - 如何使用通过JavaScript发送的城市名称参数的值（代替值'伦敦'） - >
< xsl：for-each select =locations / location [cityname ='London']>
至
< xsl：param name =cityname/>
< 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）;
$ / code> 您的IE代码包含 transformNode 不允许设置参数，您还需要更改该部分，更改
if（window.ActiveXObject | | xhttp.responseType ==msxml-document）{
ex = xml.transformNode（xslt）;
document.getElementById（WeatherDetailsContainer）。innerHTML = ex;
至
<$ p如果（window.ActiveXObject || xhttp.responseType ==msxml-document）{
var template = new ActiveXObject（'Msxml2.XslTemplate'）; $ p>
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屋！
查看全文
