侦听嵌入在 GWT 视图中的 HTML 表单上的响应

我有一个如下所示的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表单请求网址，并使用RequestBuilder查询此表单的html内容。然后我可以将其插入到 GWT 生成的div 中。目前为止，一切都好。

问题：

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

有没有办法从GWT内部访问此回调？
有没有办法覆盖 JQuery 发送操作？由于代码是HTML并且来自服务器，因此我无法将ui-binder UiFields放入其中以访问这些DOM元素。
如果提交的表格可供 GWT 访问，我需要得到回复。

有没有办法使用 JSNI 实现这一目标？

每个问题的答案：

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 中的代码。

3 I 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。看看我前段时间写的这篇文章：通过JSNI将值从GWT传递到Javascript，从JavaScript调用GWT Java函数

Javascript => GWT

和 GWT => javascript 值传递两者都可以使用 JSNI 来完成。请在此处查看有关JSNI的更多信息

相关内容

最新更新

热门标签：