收听嵌入在 GWT 视图中的 HTML 表单的响应？

Question

我有一个类似下面的 HTML：

<div>
<form>
  <input type="text" />
  <button class="sendForm" value="Send form" />
</form> 
</div>
<script>
// post the form with Jquery post
// register a callback that handles the response
</script>

我经常将这种类型的表单与显示表单的 JavaScript/JQuery 叠加层一起使用。例如，可以使用FancyBox 之类的插件来处理。我将 Fancybox 用于 Ajax 内容。

我还想使用嵌入到 GWT 视图中的这个表单。让我们假设 for 不能在客户端创建，因为它内部有一些基于服务器的标记语言来设置一些模型数据。

如果我想在 GWT 中使用此表单，我必须执行以下操作。告诉 GWT 表单请求 url 并使用 RequestBuilder 来查询该表单的 html 内容。然后我可以将它插入到 GWT 生成的 div 中。到目前为止，一切都很好。

问题：

当用户点击发送按钮时，响应由表单下脚本内的 JQuery 回调处理。

• 有没有办法从 GWT 中访问这个回调？

• 有没有办法覆盖 JQuery 发送操作？由于代码是 HTML 并且来自服务器，因此我无法将 ui-binder UiFields 放入其中以访问这些 DOM 元素。

• 如果提交的表单可供 GWT 访问，我需要获得响应。

有没有办法通过 JSNI 实现这一点？

Answer 1

每个问题的答案：

1 Is there a way to access this callback from within GWT? 实际上你不能修改回调本身，你可以从 GWT 做的是调用任何 jquery 方法，因此你可以取消绑定任何以前添加的处理程序，并设置你的。

  //NOTE: not wrapping code in $entry() to make a clearer code.
  private static native unbindForm() /*-{

    // remove all jQuery handlers added previously to my form
    $wnd.$("my_form_selector").off();

    // add a new handler for the submit event
    $wnd.$("my_form_selector").on("submit", function(event) {
       event.preventDefault();
       $wnd.$(this).post(url, ...).done(function(data) {

         // Use JSNI to call a GWT method
         @.com.example.MyClass.handleFormResponse(*)(data);
         // NOTE: that you can use a star instead of having to write parameter
         // types, when you only have one method signature in your class.
       });
    } 
  }-*/

  // handle the form response in GWT
  public static void handleFormResponse(String data) {
    // handle form response in GWT
  }

您可以使用 GWT 做的另一件事是将您的 form 包装在 FormPanel 中，并使用特定的小部件方法来设置处理程序并读取响应。但我认为这不是你想要的。

2 Is there a way to overwrite the JQuery send action 是的，使用JSNI 要求 jQuery 取消绑定之前设置的事件。请参阅 #1 中的代码。

3I need to get the response if the submitted form accessible to GWT。您必须在 jquery.post 回调中包含一些代码来调用 GWT 静态方法（您也可以使用非静态方法，但这种方式更容易）这也是 JSNI。请参阅 #1 中的代码。

4 Is there a way how I can achieve this with JSNI? 当然，JSNI 是与 GWT 中的手写 javascript 交互的方式。

附加说明：

• GWT 旨在使用非常优化的 js 代码构建 RIA 应用程序。我知道每个人都有使用外部库的原因，但是将 3party javascript 添加到您的应用程序中违背了 gwt 编译器 remove death code 和 optimize output 的主要目标。如果您喜欢 jquery 之类的 GWT 语法和功能，我建议使用 gwtquery，它已完全用 gwt 编写，因此编译器将只包含您使用的代码。

• 编写 JSNI 是调试器中难以处理的错误的来源。所以我建议使用gwt-exporter 来填充java 方法/类或gwtquery 来调用外部javascript。请参阅我前段时间写的这些帖子：Pass value from GWT to Javascript via JSNI 和 Calling GWT Java function from JavaScript

Answer 2

Javascript => GWT 和 GWT => javascript 值可以使用 JSNI 来完成。请查看here 了解更多关于 JSNI 的信息