javascript - 如何一键调用javascript函数和ajax命令？

Question

所以我想要的是在表单中使用1个按钮(因为ajax需要在表单中？)至

1) 调用 JavaScript 函数，该函数基本上只是执行一些动画(如淡出和淡入)

2) 调用更新“信息”表的 ajax 函数

所以基本上我想要的只是点击一个按钮，例如“开始”然后 javascript 会执行一些客户端操作，例如移动对象，而 ajax 会向我提供有关存储在服务器上的那些对象的信息。

我们的东西看起来像这样:

<h:panelGroup layout="block" id="player" class="player">
                    <h2 class="accessibility">W&uuml;rfelbereich</h2>
                    <span class="accessibility">An der Reihe ist</span><div id="currentPlayerName"><h:outputText value=" #{spiel.getSpieler_Name()}" /></div>
                    <h:commandButton id="dice" alt="W&uuml;rfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" title="W&uuml;rfel">
                        <f:ajax render=":gameinfo" onevent="animate" />
                    </h:commandButton>
                </h:panelGroup>

所以 gameinfo 是包含从服务器检索并使用 ajax 调用的信息的表

animate 是我们的 javascript 函数，它执行动画..

这里的问题是，一旦我们将该 ajaax 命令放入表单标签中，动画就不起作用了

Answer 1

试试这个:

<h:commandButton id="dice" alt="W&uuml;rfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" onclick="animate();" title="W&uuml;rfel">
    <f:ajax render=":gameinfo" />
</h:commandButton>