如何在普通的 <form> 中使用 <f:ajax> 而不是 <h:form>？

【问题标题】：How to use <f:ajax> in a plain <form> instead of <h:form>?如何在普通的 <form> 中使用 <f:ajax> 而不是 <h:form>？
【发布时间】：2012-06-08 08:18:12
【问题描述】：

我有一个搜索表单，它使用标准 HTML <form> 标记并发送一个像 search.jsf?country=x&city=y 这样的 GET 请求。它们被设置为视图范围 bean 中的视图参数。

搜索表单包含两个级联下拉菜单，一个用于国家/地区，一个用于城市。如何通过<f:ajax> 更新城市下拉列表而不将<form> 更改为<h:form> 从而破坏GET 功能？我必须使用XMLHttpRequest 的“普通香草”ajax 吗？我如何在 JSF 支持 bean 上使用它？

【问题讨论】：

标签： ajax jsf

【解决方案1】：

我会继续使用<h:form>，并在通过提交按钮提交时向 JavaScript 寻求帮助以将其转换为 GET 表单。

类似：

<h:form prependId="false" onsubmit="doGet(this)">
    <h:selectOneMenu id="country" value="#{bean.country}">
        <f:selectItems value="#{bean.countries}" />
        <f:ajax listener="#{bean.loadCities}" render="city" />
    </h:selectOneMenu>
    <h:selectOneMenu id="city">
        <f:selectItems value="#{bean.cities}" />
    </h:selectOneMenu>
    <input type="submit" value="Search" />
</h:form>

用这个 JS 把它变成一个 GET 表单并移除两个 <h:form> 特定的隐藏字段：

function doGet(form) {
    form.method = "get";
    form.removeChild(document.getElementsByName(form.name)[1]);
    form.removeChild(document.getElementById("javax.faces.ViewState"));
}

【讨论】：