JSF中的Ajax加载所有页面

Question

我有一个身份验证表单，当我点击命令按钮时，它应该刷新表单以防登录失败，否则重定向用户

我在commandButton中创建ajax来检查是否登录失败，如果是，OutputText将变为：登录失败

我不需要修改以使其工作

这是我的JSF，

    <h:form id="form_login" >
    <div>
    <!-- email -->
   <div class="input-group input-group-sm">
   <h:inputText id="mail" type="text" class="form-control" placeholder="Email" value="#{login.mail}"  required="true" requiredMessage="Entrez votre mail svp" validatorMessage="Email invalide">
<f:ajax event="keyup" render="messageerreur" />
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" /> </h:inputText>
<span class="input-group-addon"><i class="fa fa-check"></i></span>
 </div>
 <h:message id="messageerreur" for="mail" class="recover-password" style="color:#eb6a5a" />
     <!--  Password -->
 <div class="input-group input-group-sm">
 <h:inputSecret id="password" class="form-control" placeholder="Password" value="#{login.pass}" required="true"  requiredMessage="Entrez votre password svp" > 
</h:inputSecret>
 <span class="input-group-addon"><i class="fa fa-times"></i></span>
 </div>
 <h:message  id="erreurpass" for="password" class="recover-password" style="color:#eb6a5a" />
</div> 
 <br></br>
                                <div class="pull-right">
<h:commandButton id="login_button"  action="#{login.authentification()}" value="Login" class="btn btn-login">
 <f:ajax onevent="click"  execute="form_login" render="login_failed"/> 
  </h:commandButton></div>
<div class="center">                          
<h:outputText id ="login_failed" class="recover-password" value="#{login.failed}" />
 </div>
</h:form>

这里是托管 Bean 中的函数：

public String authentification()
    {
        System.out.println("Hi");
        System.out.println(getMail());
        System.out.println(getPass());
        if(getMail()!=null && getPass()!=null)
        {
        login_success=marchandBo.authentication(getMail(), getPass());
        }
        if(login_success)
            return "Dashboard_user.xhtml";
        else
            setFailed("Login failed");

        return null;
    }

Answer 1

你的代码有几个问题：

1. 您在 JSF 组件上定义 class 属性。我已经看到这会导致各种奇怪的事情。也许你想要styleClass？

2. JSF 会去掉你的 HTML5 placeholder 属性，除非你使用自定义渲染器（比如omnifaces Html5RenderKit）。请参阅链接了解如何在本机 JSF-2.2 中执行此操作。

3. 您的具体问题可能是由onevent 属性引起的。根据f:ajax documentation，属性名称为event。您可以将其关闭以触发“默认行为”上的 ajax 请求，在h:commandButton 的情况下为submit。使用event="click" 属性，您实际上防止以标准方式提交表单的默认行为。这就是添加 listener 操作有效的原因 - 它复制了您在 action 属性中的内容。

总结一下，把你的代码改成如下：

<h:commandButton id="loginBtn" action="#{login.authentification}" 
        value="Login" styleClass="btn btn-login">
    <f:ajax execute="@form" render="login_failed"/> 
</h:commandButton>

Answer 2

f:ajax 标记的属性onevent 旨在成为处理事件的javascript 函数。你想要的是event="click"。该属性描述了哪个 DOM 事件将触发该操作。