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

【问题标题】：How to present an XML file in HTML format in different ways, according to user input?如何根据用户输入以不同的方式呈现 HTML 格式的 XML 文件？
【发布时间】：2012-02-27 19:08:36
【问题描述】：

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

我还创建了一个与上述 XML 文件相关的 XSL 文件，这样每当我在浏览器中打开 XML 文件时，它的内容就会以 html 表格格式呈现，其中包含 3 行“作者”、“标题”、 “年”

我现在要做的是创建一个 HTML 文件，该文件将显示上表但不是其所有内容，仅显示通过用户输入询问的内容（用户输入的相应字段也应在同一个 html 文件中找到我猜..)

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

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

我是否必须再次处理 XML 和 XSL 文件中的内容，还是应该从现在开始让它们保持原样，只处理我将要创建的 html 文件？
为了实现我想要的，我的 html 文件应该包含什么？仅显示部分 XML 文件但始终根据 XSL 文件的 Javascript 函数？我会再次在 html 文件中使用 XSLT 还是仅使用 javascript？

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

有人可以告诉我我应该逐步遵循的过程（不是详细，而是我应该按什么顺序处理涉及到的所有问题..）？

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

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

【问题讨论】：

标签： javascript html xml xslt

【解决方案1】：

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

阅读xsl:param 指令。

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

XSLT 转换的调用者在调用转换时为这些参数指定值的方式取决于实现，并且从一个 XSLT 处理器到另一个不同。您需要阅读特定 XSLT 处理器的文档以了解如何执行此操作的确切信息。

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

【讨论】：

【解决方案2】：

您需要将 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 - On the Client。在本教程中，他们还展示了如何使用 ajax 加载文件。您当然可以像我的示例中的 XML 一样加载 XSL 文件。

【讨论】：

感谢 Nitzan 提供的有用意见！恐怕我不能使用 Ajax 或 iFrame 或 PHP 来解决这个问题，但我仍然会尝试使用你的建议！在订购等方面仍然非常混乱，但我想我最好继续研究 w3schools毕竟和comebck更具体的问题..
为什么不能使用 iframe 和 ajax？
这是我的任务，不幸的是，我们只能使用 XML、XSLT、XPATH、HTML、Javascript。唯一的问题是我仍然不知道从哪里开始以及哪个工具用于什么.. 我需要 html 文件向用户呈现搜索字段、按钮和表格，这些字段会根据用户的情况而变化寻找....
iframe 是一个有效的 html 标签，你可以使用 javascript 来加载数据，它在你的约束范围内。