如何根据用户输入以不同的方式以HTML格式显示XML文件

How to present an XML file in HTML format in different ways, according to user input?

本文关键字：HTML 方式 格式 显示 文件 XML 何根 用户 输入      更新时间：2023-09-26

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

我还创建了一个与上述XML文件相关的XSL文件，这样每当我在浏览器中打开XML文件时，其内容都会以html表格格式显示，其中包括3行"作者"、"标题"、"年份"

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

例如，用户可以键入作者的姓名、年份、标题、标题中包含的单词或作者的姓名，然后将适当的表格呈现给他。

我是这一切的新手，所以我的问题如下：

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

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

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

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

非常感谢您的理解和帮助！我知道有很多关于w3schools的信息，但问题是一切都是零散的，我仍然不知道如何将所有这些结合起来，以何种顺序和方法进行选择！

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

您需要将用户想要的处理作为参数传递给转换。

阅读xsl:param指令。

转换的外部参数可以是任何全局声明的（顶部元素xsl:stylesheet的子元素）xsl:param元素。

XSLT转换的调用程序在调用转换时为这些参数指定值的方式取决于实现，并且因XSLT处理器而异。您需要阅读特定XSLT处理器的文档，以了解如何做到这一点的确切信息。

例如，如果XSLT处理器是.NET XslCompiledTransform，则向转换传递参数的方法是通过XsltArgumentList.AddParam()方法。

您需要将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>

至于XSLT部分，这里有一个关于如何做到这一点的教程：XSLT-在客户端上。在本教程中，他们还展示了如何使用ajax加载文件。当然，您可以像我的示例中的XML文件一样加载XSL文件。

相关文章：