ajax - 在执行操作之前重新加载页面的某些部分？

Question

我有一个h:commandButton电话action="#{bean.do}"。还有一些对该按钮的 ajax 请求，它应该重新设计网站的一部分。这种重新设计应该在动作执行之前进行。我怎样才能做到这一点？

<h:commandButton action="#{bean.do}">
    <f:ajax execute="@form" render="specificId" />
</h:commandButton>

由于操作do有时需要很长时间，我希望页面首先显示消息/图像或类似的。然后首先执行操作。但是怎么做？

Answer 1

您可以使用该onclick属性在调用操作之前执行一些 JavaScript 代码。

例如：

<h:commandButton ... onclick="document.body.style.background='pink'">

然而，最好为此使用onevent属性<f:ajax>，以便您可以恢复更改：

<h:commandButton ...>
    <f:ajax ... onevent="handleDo" />
</h:commandButton>
<img id="progress" src="progress.gif" class="hidden" />

例如，它禁用/启用按钮并显示/隐藏进度图像：

function handleDo(data) {
    var status = data.status; // Can be 'begin', 'complete' and 'success'.
    var button = data.source; // The HTML element which triggered the ajax.
    var image = document.getElementById("progress"); // Ajax loading gif?

    switch (status) {
        case 'begin': // This is called right before ajax request is been sent.
            button.disabled = true;
            image.style.display = "block";
            break;

        case 'complete': // This is called right after ajax response is received.
            image.style.display = "none";
            break;

        case 'success': // This is called when ajax response is successfully processed.
            button.disabled = false;
            break;
    }
}