如何根据 HTML 传递给它的参数值更改 XSLT 工作表的行为?



我正在使用XML,XSLT,HTML和JavaScript。

我正在使用的 XML 文档具有以下格式:

<allstops>
<stop number="2504" name="Main &amp; Bainard EB">
<location>
<latitude>42.91033567</latitude>
<longitude>-81.29671483</longitude>
</location>
<routes>28</routes>
</stop>

具有许多与上述相同结构的实例。

我正在使用 html 文件来接受用户输入:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>enter the LTC route number you are interested in and click Update to see stops on that route</h2>
<h3>leave field blank and click Update to see all stops</h3>
<!--form elements-->
<input type="text" id="userInput"/>
<input type="submit" value="Update" onclick="RenderXSLT()"/>
<!--create the div that will contain the xslt output-->
<div id="xsltOutput"></div>
<!--inline script-->
<script type="text/javascript">
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) { }
xhttp.send("");
return xhttp.responseXML;
}
function RenderXSLT() {
xml = loadXMLDoc("ltcstops.xml");
xslt = loadXMLDoc("busStops.xslt");
var input = document.getElementById("userInput").value;
input = input.toLowerCase();
//add leading 0 on single digit
if (input.length == 1)
{
input = "0" + input;
}

if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
// This code is for Internet Explorer
var template = new ActiveXObject("Msxml2.XslTemplate.6.0");
template.stylesheet = xslt;
var proc = template.createProcessor();
proc.input = xml;
proc.addParameter("route", input);
proc.transform();
document.getElementById("xsltOutput").innerHTML = proc.output;
}
else if (typeof XSLTProcessor !== 'undefined') {
// This code is for other browsers
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
xsltProcessor.setParameter(null, "route", input);
var resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("xsltOutput").innerHTML = "";
document.getElementById("xsltOutput").appendChild(resultDocument);
}
}
</script>

以下是我的 XSLT:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
<xsl:output method="html" indent="yes"/>
<xsl:param name="route" select="routes"/>
<xsl:template match="/">
<h1 id="header">
There are <xsl:value-of select="count(//stop[contains(routes, $route)])"></xsl:value-of> stops on route #<xsl:value-of select="$route"></xsl:value-of>
</h1>
<table border="1">
<tr>
<th style="text-align:left">Stop #</th>
<th style="text-align:left">Stop name</th>
<th style="text-align:left">Latitude</th>
<th style="text-align:left">Longitude</th>
<th style="text-align:left">Routes</th>
</tr>
<xsl:apply-templates select=".//stop[contains(./routes, $route)]">
<xsl:sort select="./@number" data-type="number" order="ascending"/>
</xsl:apply-templates>
</table>
</xsl:template>

<xsl:template match="stop">
<tr>
<td>
<xsl:value-of select="@number"/>
</td>
<td>
<xsl:value-of select="@name"/>
</td>
<td>
<xsl:value-of select="location/latitude"/>
</td>
<td>
<xsl:value-of select="location/longitude"/>
</td>
<td>
<xsl:value-of select="routes"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>

本练习的目的是接受用户输入以在 XML 中搜索特定路由号,然后将有关该路由的信息显示到表中。我的代码目前完成了大部分工作 - 我可以使用我的 XSLT 模板成功找到路由,并且我添加了一小段代码以确保用户输入不会因用户输入的单个数字而混淆 XSLT contains()。

如果用户将该字段留空,我希望能够更改标头中的消息(在 XSLT 中生成)。谁能建议我如何开始更改我的 XSLT,以便在输入字段为空时它会做出不同的反应?

任何建议表示赞赏。 提前感谢您的时间和精力

我建议从这个问题/答案开始,因为这是我用代码处理这种事情的方式。检查字符串在 XSLT 中是空还是空

最新更新