javascript - 使用 JSF 和 primefaces 通过 JavaScript 将表单数据传递到支持 bean

Question

我正在尝试使用 JavaScript 方法处理几行输入数据，该方法采用 Google 提供的地理编码服务，并将处理后的数据放入支持 bean 中。

用户将看到一个登录页面，他们可以在其中输入他们的地址详细信息。单击提交按钮后，我会尝试通过调用 JavaScript 方法对他们的地址进行地理编码。此方法读取用户输入的数据并将其发送到地理编码服务。该服务需要几毫秒才能完成。一旦完成，我希望将它找到的数据存储在登录页面的支持 bean 中。

以下 JavaScript 函数用于对地址进行地理编码。

    function codeAddress() {
        alert('coding address');
        geocoder = new google.maps.Geocoder();
        postcode = document.getElementById('loginForm:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              alert('setting location: '+results[0].geometry.location);
              document.getElementById('loginForm:location').value = results[0].geometry.location;
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

它将其值存储在表单内的隐藏字段中。我不知道这是否是最好的做法，这只是我在很多例子中看到的。我假设设置该组件的值将调用loginBean中相应的位置 setter 。

    <h:inputHidden id="location" value="#{loginBean.location}" />

我正在尝试使用用于提交表单的按钮来实现这一切。

        <p:commandButton id="submitButton" value="login"
            action="#{loginBean.doLogin}"
            styleClass="blue login" update="growl">
                <p:ajax event="click" onstart="codeAddress()" />
        </p:commandButton>

我必须补充一点，我不确定这种结构。按提交按钮可能会立即加载下一页，甚至不给 ajax 调用机会。

尝试实现这一目标给我带来了几个问题。使用上面的代码，JavaScript 函数永远不会被调用。为了简单起见，我在页面顶部的脚本标记中声明了此函数。第二个问题是，我不清楚将此值从 JavaScript 方法传递到 loginBean 的最佳方法是什么。我应该在表单中放置一些隐藏标签并将其值标签链接到 loginBean 属性吗？我应该向 ajax 组件添加监听器吗？

Answer 1

服务的 JavaScript 回调函数应触发表单提交(成功时)。这样在提交之前总是有时间完成。