时间戳

首页 > 解决方案 > 使用触发器评估 xQuery 并在 eXistDB 中的 HTML 页面内使用 return

xquery - 使用触发器评估 xQuery 并在 eXistDB 中的 HTML 页面内使用 return

问题描述

我想使用 Button/link/whatever 从我的 eXist Webapp 调用 xQuery 函数，并使用返回的值来显示 Bootstrap 警报。所以包括一个

<button type="button" class="btn btn-danger btn-circle">execute xQuery</button>

在我的 html 中，如果它被点击评估

let $name := "Peter"
return <div class="alert alert-success" role="alert">Hi {$name}</div>

（实际上我想要比这更复杂的东西，但你明白了..）

并返回

<div class="alert alert-success" role="alert">Hi Peter</div>

在我的页面内。这是可能的，如果，如何？

在这里使用模板系统对我没有帮助，只是链接到我的数据库中的 xQuery 会执行查询，但会重定向到显示结果的另一个页面。我可以使用 AJAX 来评估 xQuery 并修改当前的 DOM 吗？

谢谢！

标签： xqueryexist-db

解决方案

出于完整性和未来参考的原因，我将在此处发布 MWE：

  1. 在 eXist 中的页面中添加一个 Button 和一个结果面板：
<a class="btn btn-danger run" id="path/to/the/xquery/in_your_app.xq" href="#">
   <i class="glyphicon glyphicon-play" /> Run xQuery
</a>
<img class="load-indicator" src="resources/img/ajax-loader.gif" />
<div style="margin-top: 12pt;" class="output" />
  1. 在您的应用程序的资源文件夹中有一个runxquery.js并在您的page.html：
$(document).ready(function() {
    $(".run").click(function(ev) {
        ev.preventDefault();
        file = this.id;
        var output = $(this).parent().parent().find(".output");
        var indicator = $(this).parent().parent().find(".load-indicator");
        function run() {
            indicator.show();
            output.hide();
            $.ajax({
                url: "/exist/rest/db/apps/yourapp/" + file,
                type: "GET",
                success: function(result) {
                    indicator.hide();
                    output.html(result);
                    output.slideDown(600);
                }
            });
        }

        if (output.is(":empty")) {
            run();
        } else {
            output.slideUp(800, function() {
                output.empty();
                run();
            });
        }
    });
});

  1. 单击按钮将触发在您的应用程序文件夹内的按钮 id 中定义的 xquery。

  2. 如果运行 xQuery 应该返回 HTML 代码，则需要在 xQuery 中指定：

declare namespace output = "http://www.w3.org/2010/xslt-xquery-serialization";
declare option output:method "html";
declare option output:media-type "application/html";

let $text := "This is the alert text"

return 
<div class="alert alert-success alert-dismissible" data-dismiss="alert" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"/>
   {$text}
</div>

推荐阅读