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>