Javascript 如何根据HTML传递给XSLT表的参数值更改XSLT表的行为？_Javascript_Html_Xml_Xslt

Javascript 如何根据HTML传递给XSLT表的参数值更改XSLT表的行为？

javascript html xml xslt

Javascript 如何根据HTML传递给XSLT表的参数值更改XSLT表的行为？,javascript,html,xml,xslt,Javascript,Html,Xml,Xslt,我正在使用XML、XSLT、HTML和javascript 我使用的xml文档具有以下格式： <allstops> <stop number="2504" name="Main & Bainard EB"> <location> <latitude>42.91033567</latitude> <longitude>-81.29671483</l

我正在使用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>


42.91033567
-81.29671483
28

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

我正在使用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>


输入您感兴趣的LTC路线编号，然后单击“更新”以查看该路线上的站点
将字段留空，然后单击“更新”以查看所有站点
函数loadXMLDoc（文件名）
{
if（window.ActiveXObject）{
xhttp=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}
否则{
xhttp=newXMLHttpRequest（）；
}
xhttp.open（“GET”，filename，false）；
试一试{
xhttp.responseType=“msxml文档”
}
捕获（错误）{}
xhttp.send（“”）；
返回xhttp.responseXML；
}
函数RenderXSLT（）{
xml=loadXMLDoc（“ltcstops.xml”）；
xslt=loadXMLDoc（“bustops.xslt”）；
var input=document.getElementById（“userInput”）.value；
input=input.toLowerCase（）；
//在一位数上添加前导0
if（input.length==1）
{
输入=“0”+输入；
}
if（window.ActiveXObject | | xhttp.responseType==“msxml文档”）{
//此代码适用于Internet Explorer
var-template=newActiveXObject（“Msxml2.XslTemplate.6.0”）；
template.stylesheet=xslt；
var proc=template.createProcessor（）；
proc.input=xml；
过程添加参数（“路由”，输入）；
proc.transform（）；
document.getElementById（“xsltOutput”）.innerHTML=proc.output；
}
else if（XSLTProcessor的类型！==“未定义”）{
//此代码适用于其他浏览器
var xsltProcessor=new xsltProcessor（）；
导入样式表（xslt）；
setParameter（null，“路由”，输入）；
var resultDocument=xsltProcessor.transformToFragment（xml，文档）；
document.getElementById（“xsltOutput”）.innerHTML=“”；
document.getElementById（“xsltOutput”）.appendChild（resultDocument）；
}
}

下面是我的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，以便在输入字段为空时做出不同的反应

谢谢你的建议。提前感谢您的时间和精力

我建议从这个问题/答案开始，因为这就是我如何用代码处理此类事情的方法