Javascript 如何使commandButton不';t重新加载/刷新页面

Javascript 如何使commandButton不';t重新加载/刷新页面,javascript,ajax,jsf,Javascript,Ajax,Jsf,实际上,我有一个输入,我希望在不重新加载页面的情况下发送请求(可能是Ajax)。我的代码如下,但首先我需要说我已经看到了,这并不能解决我的问题 以下是我的代码: <h:form> <div class="form-group"> <div class="col-md-10"> <h:inputText styleClass="form-control" id="disciplina" value="#{di

实际上,我有一个输入,我希望在不重新加载页面的情况下发送请求(可能是Ajax)。我的代码如下,但首先我需要说我已经看到了,这并不能解决我的问题

以下是我的代码:

<h:form>
    <div class="form-group">
        <div class="col-md-10">
            <h:inputText styleClass="form-control" id="disciplina" value="#{disciplinaMBean.nome}" valueChangeListener="#{disciplinaMBean.atualizarListagemPesquisa}">
                 <f:ajax event="keyup" render=":meuForm:minhaTabela"/>  
            </h:inputText>
        </div>
        <div class="col-md-2">
            <h:commandButton value="Adicionar" styleClass="btn btn-md btn-success" action="#{disciplinaMBean.cadastrar}">
                 <f:ajax event="click" execute="@form" render=":meuForm:minhaTabela"/>
            </h:commandButton>
        </div>
    </div>
</h:form>
<h:form id="inserirDisciplina">
    <h:inputText id="disciplina" value="#{disciplinaMBean.nome}" />
    <h:commandButton value="Adicionar" action="#{disciplinaMBean.cadastrar}">
        <f:ajax event="click" listener="#{disciplinaMBean.cadastrar}"/>
    </h:commandButton>
</h:form>

中的“呈现”是更新页面中的数据表

那么,我做错了什么

记住,我要:

<h:form>
    <div class="form-group">
        <div class="col-md-10">
            <h:inputText styleClass="form-control" id="disciplina" value="#{disciplinaMBean.nome}" valueChangeListener="#{disciplinaMBean.atualizarListagemPesquisa}">
                 <f:ajax event="keyup" render=":meuForm:minhaTabela"/>  
            </h:inputText>
        </div>
        <div class="col-md-2">
            <h:commandButton value="Adicionar" styleClass="btn btn-md btn-success" action="#{disciplinaMBean.cadastrar}">
                 <f:ajax event="click" execute="@form" render=":meuForm:minhaTabela"/>
            </h:commandButton>
        </div>
    </div>
</h:form>
<h:form id="inserirDisciplina">
    <h:inputText id="disciplina" value="#{disciplinaMBean.nome}" />
    <h:commandButton value="Adicionar" action="#{disciplinaMBean.cadastrar}">
        <f:ajax event="click" listener="#{disciplinaMBean.cadastrar}"/>
    </h:commandButton>
</h:form>
  • 当用户插入文本并单击“输入”按钮时,正常发送表单
  • 但是在发送请求/表单时,不要刷新/重新加载页面 谢谢

    答案如下: 我在谷歌上搜索,找到了一些解决方案,所以我根据自己的问题调整了答案

    以下是我的最新代码:

    <h:form>
        <div class="form-group">
            <div class="col-md-10">
                <h:inputText styleClass="form-control" id="disciplina" value="#{disciplinaMBean.nome}" valueChangeListener="#{disciplinaMBean.atualizarListagemPesquisa}">
                     <f:ajax event="keyup" render=":meuForm:minhaTabela"/>  
                </h:inputText>
            </div>
            <div class="col-md-2">
                <h:commandButton value="Adicionar" styleClass="btn btn-md btn-success" action="#{disciplinaMBean.cadastrar}">
                     <f:ajax event="click" execute="@form" render=":meuForm:minhaTabela"/>
                </h:commandButton>
            </div>
        </div>
    </h:form>
    
    <h:form id="inserirDisciplina">
        <h:inputText id="disciplina" value="#{disciplinaMBean.nome}" />
        <h:commandButton value="Adicionar" action="#{disciplinaMBean.cadastrar}">
            <f:ajax event="click" listener="#{disciplinaMBean.cadastrar}"/>
        </h:commandButton>
    </h:form>
    
    
    

    如果您有相同的问题,可能您需要的是
    f:ajax
    标记,它在
    侦听器
    属性中带有
    {yourBean.yourMethod}

    是支持bean
    @ViewScoped
    ?为什么不像您的问题中提供的那样在
    h:commandButton
    中编写
    不会触发ajax请求,而是一个同步请求,就像没有添加
    一样?您正在使用JSF2.x吗?模板中是否有
    而不是