Javascript 如何根据用户输入以不同的方式呈现HTML格式的XML文件？_Javascript_Html_Xml_Xslt

Javascript 如何根据用户输入以不同的方式呈现HTML格式的XML文件？

javascript html xml xslt

Javascript 如何根据用户输入以不同的方式呈现HTML格式的XML文件？,javascript,html,xml,xslt,Javascript,Html,Xml,Xslt,我有一个由书籍节点组成的XML文件，每本书包含1-4位作者、1个标题和1年我还创建了一个与上述XML文件相关的XSL文件，这样每当我在浏览器中打开XML文件时，它的内容都会以html表格格式显示，包括3行“Author”、“Title”、“Year” 我现在想做的是创建一个HTML文件，它将显示上面的表，但不是它的所有内容，只显示通过用户输入请求的内容（我想用户输入的适当字段也应该在同一个HTML文件中找到..） e、 g.用户可以键入作者姓名、年份、标题或标题中包含的单词或作者姓名，然后将相

我有一个由书籍节点组成的XML文件，每本书包含1-4位作者、1个标题和1年

我还创建了一个与上述XML文件相关的XSL文件，这样每当我在浏览器中打开XML文件时，它的内容都会以html表格格式显示，包括3行“Author”、“Title”、“Year”

我现在想做的是创建一个HTML文件，它将显示上面的表，但不是它的所有内容，只显示通过用户输入请求的内容（我想用户输入的适当字段也应该在同一个HTML文件中找到..）

e、 g.用户可以键入作者姓名、年份、标题或标题中包含的单词或作者姓名，然后将相应的表格呈现给用户

我是新来的，所以我的问题如下：

我是否必须再次处理XML和XSL文件中的内容，还是应该从现在起保持它们不变，只处理将要创建的html文件

为了实现我想要的，我的html文件应该包含什么？只显示XML文件的一部分但始终根据XSL文件的Javascript函数？我会在html文件中再次使用XSLT还是简单地使用javascript

我需要的是创建smth，它将从用户（javascript？）获取输入，然后使用解析器（XSLT？）根据用户的输入解析XML？然后在屏幕上返回通过我创建的XSL模板过滤的结果

有人能告诉我我应该一步一步地遵循的流程吗（不是详细的，但我应该按照什么顺序来处理这一过程中涉及的所有问题）

非常感谢您的理解和帮助！我知道有很多关于w3schools的信息，但问题是所有的东西都是零碎的，我仍然不知道如何组合所有这些，以何种顺序和选择何种方法

顺便说一句，我不想为此使用jquery，只有XML、XSLT、XPATH、HTML和Javascript标准

您需要将XSL和XML文件加载到javascript中，您可以使用ajax请求，也可以使用iframe为您加载它们。一旦在javascript中有了它们，您就可以使用XPath和XSLT来做您想要做的事情

例如，这里有一种加载xml然后使用iframe方法对其使用XPath的简单方法，它使用输入值来查询xml：

<html>
<head>
    <title> xml test </title>
    <script type="text/javascript">
        var xml = null;

        function getXml(path) {
            document.getElementById("loader").src = path;
        }

        function loaded(frm) {
            if (frm.contentWindow) {
                xml = frm.contentWindow.document;
            }
        }

        function query() {
            var value = document.getElementById("query").value;
            var evaluator = new XPathEvaluator();
                var result = evaluator.evaluate("//" + value, 
                    xml, 
                    null, 
                    XPathResult.FIRST_ORDERED_NODE_TYPE, 
                    null);

                console.log(result.singleNodeValue);
        }
    </script>
</head>
<body>
    Query the xml: <input type="text" id="query" />
    <input type="button" value="Go" onclick="query()" />
    <iframe style="width: 0px; height: 0px; display: none;" id="loader" onload="loaded(this)"></iframe>
    <script type="text/javascript">
        getXml("index.xml");
    </script>
</body>


xml测试
var xml=null；
函数getXml（路径）{
document.getElementById（“loader”）.src=path；
}
已加载函数（frm）{
如果（frm.contentWindow）{
xml=frm.contentWindow.document；
}
}
函数查询（）{
var值=document.getElementById（“查询”）.value；
var evaluator=新的XPathEvaluator（）；
var结果=评估器。评估（“/”+值，
xml，
无效的
XPathResult.FIRST\u ORDERED\u NODE\u类型，
无效）；
console.log（result.singleNodeValue）；
}
查询xml：
getXml（“index.xml”）；

至于XSLT部分，这里有一个关于如何做到这一点的教程：。在本教程中，他们还展示了如何使用ajax加载文件。

当然，您可以像我的示例中的XML文件一样加载XSL文件。

例如，这里有一种加载xml然后使用iframe方法对其使用XPath的简单方法，它使用输入值来查询xml：

<html>
<head>
    <title> xml test </title>
    <script type="text/javascript">
        var xml = null;

        function getXml(path) {
            document.getElementById("loader").src = path;
        }

        function loaded(frm) {
            if (frm.contentWindow) {
                xml = frm.contentWindow.document;
            }
        }

        function query() {
            var value = document.getElementById("query").value;
            var evaluator = new XPathEvaluator();
                var result = evaluator.evaluate("//" + value, 
                    xml, 
                    null, 
                    XPathResult.FIRST_ORDERED_NODE_TYPE, 
                    null);

                console.log(result.singleNodeValue);
        }
    </script>
</head>
<body>
    Query the xml: <input type="text" id="query" />
    <input type="button" value="Go" onclick="query()" />
    <iframe style="width: 0px; height: 0px; display: none;" id="loader" onload="loaded(this)"></iframe>
    <script type="text/javascript">
        getXml("index.xml");
    </script>
</body>


xml测试
var xml=null；
函数getXml（路径）{
document.getElementById（“loader”）.src=path；
}
已加载函数（frm）{
如果（frm.contentWindow）{
xml=frm.contentWindow.document；
}
}
函数查询（）{
var值=document.getElementById（“查询”）.value；
var evaluator=新的XPathEvaluator（）；
var结果=评估器。评估（“/”+值，
xml，
无效的
XPathResult.FIRST\u ORDERED\u NODE\u类型，
无效）；
console.log（result.singleNodeValue）；
}
查询xml：
getXml（“index.xml”）；

至于XSLT部分，这里有一个关于如何做到这一点的教程：。在本教程中，他们还展示了如何使用ajax加载文件。

当然，您可以像我的示例中的XML文件一样加载XSL文件。

您需要将用户想要的处理作为参数传递给转换
阅读
xsl:param
指令
转换的外部参数可以是任何全局声明的（顶级元素的子元素
xsl:stylesheet
）
xsl:param
元素
XSLT转换的调用者在调用转换时指定这些参数值的方式取决于实现，并且随着XSLT处理器的不同而不同。您需要阅读特定XSLT处理器的文档，以了解如何执行此操作的确切信息

例如，如果XSLT处理器是.NET XslCompiledTransform，则将参数传递给转换的方法是通过方法。
您需要将用户想要的处理作为参数传递给转换
阅读
xsl:param
指令
转换的外部参数可以是任何全局声明的（顶层元素的子元素
xsl:stylesheet