Fatal编程技术网
  • ajax/
  • f:ajax仍然刷新整个页面

f:ajax仍然刷新整个页面

ajax

f:ajax仍然刷新整个页面,ajax,jsf-2.2,Ajax,Jsf 2.2,我尝试AJAXify一个简单的commandButton，以便在不刷新整个页面的情况下发送AJAX请求。我的xhtml文件包括以下代码： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

我尝试AJAXify一个简单的commandButton，以便在不刷新整个页面的情况下发送AJAX请求。我的xhtml文件包括以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
</h:head>

<h:body>
    <h:form id="form">
        <h:inputText id="name" value="#{test.name}"></h:inputText>
        <h:commandButton value="Welcome Me">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h2>
            <h:outputText id="output" value="#{test.sayWelcome}" />
        </h2>
    </h:form>
</h:body>
</html>
但是，当我单击commandButton时，表单被提交，整个页面被刷新

我希望避免使用额外的JSF框架

提前感谢。

您可以尝试执行和渲染属性：

 <h:form id="form">
    <h:inputText id="name" value="#{test.name}"></h:inputText>
    <h:commandButton value="Welcome Me" action=#{test.sayWelcome()}>
        <f:ajax execute="name" render="output" />
    </h:commandButton>

</h:form>
<h2> <!-- Outside the Form! -->
   <h:outputText id="output" value="#{test.message}" />
</h2>
这里的问题是您使用了错误的
@ViewScoped
。是的，所以我想

您拥有的
@ViewScoped
版本并不打算与CDI的
@Named
一起使用。因此，您实际上没有viewscoped bean—该bean位于隐式CDI
@依赖范围内，其行为有点像
@RequestScoped
范围


简而言之：改用
javax.faces.view.ViewScoped
注释，你的bean就会正常运行。
你更新了
@表单，它是整个页面的一部分（除了正文和页眉），所以“整个页面”似乎是由你设计的。不相关：您使用了错误的
@Viewscoped
作为
@命名的
，使用了
javax.faces.view.Viewscoped
表单实际上是整个页面的一部分。但是当我点击commandButton时，表单是在不使用AJAX的情况下提交的。也就是说，如果我按F5键（例如在Firefox中），我会收到这样一条消息：“要显示此页面，Firefox必须发送信息，重复先前执行的任何操作（如搜索或订单确认）。”因此，行为（调试的网络流量？）与
f:ajax
Yes相同或不相同，网络流量与没有f:ajax的流量相同。我尝试了完全相同的代码，但结果仍然相同。我只是更新了方法“sayWelcome”和消息集/get。如果对这两个属性都使用
@form
，会怎么样？如果我们添加，refesh会返回所有消息，但不会返回任何消息。

 <h:form id="form">
    <h:inputText id="name" value="#{test.name}"></h:inputText>
    <h:commandButton value="Welcome Me" action=#{test.sayWelcome()}>
        <f:ajax execute="name" render="output" />
    </h:commandButton>

</h:form>
<h2> <!-- Outside the Form! -->
   <h:outputText id="output" value="#{test.message}" />
</h2>



public class TestBackingBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;
    private String message;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String value) {
        this.message = value;
    }

    public void sayWelcome() {
        // check if null?
        if ("".equals(name) || name == null) {
            message = "";
        } else {
            message = "Ajax message : Welcome " + name;
        }
    }
}