Google Dart Forms工作示例

Question

我目前正在尝试使用用户名和电子邮件在Dart中创建一个简单的表单以进行注册.

我找不到一个可以测试的完整工作示例.如果有人可以解释如何将下面的jQuery代码转换为Dart,我认为这将大大澄清事情.

我也见过FormDataDart课程,但没有例子.任何帮助表示赞赏.

$("#submit").click( function() {
     $.post( $("#myForm").attr("action"),
             $("#myForm :input").serializeArray(),
             function(info) {

               $("#responseDiv").empty();
               $("#responseDiv").html(info);
             });

    $("#myForm").submit( function() {
       return false;    
    });
});

Answer 1

首先导入两个库:

import 'dart:html';
import 'dart:convert';

然后我们定义一个序列化函数:

serializeForm(FormElement form) {
  var data = {};

  // Build data object.
  form.querySelectorAll('input,select').forEach((Element el) {
    if (el is InputElement)
      data[el.name] = el.value;
  });

  return data;
}

它只是将表单序列化为Map数据.我不知道Dart表单序列化器,可能有一些包用于此目的.请注意,上面的示例仅处理输入.

接下来我们假设以下HTML:

<form id="myForm" action="/bar">
  <label>Foo:</label>
  <input type="text" name="foo" value="bar" />
</form>

<button id="mySubmit">Send it</button>

最后我们的Dart客户端代码用于表单处理:

main() {
  FormElement form = querySelector('#myForm');
  ButtonElement button = querySelector('#mySubmit');

  button.onClick.listen((e) {
    var req = new HttpRequest();

    req.onReadyStateChange.listen((ProgressEvent e) {
      if (req.readyState == HttpRequest.DONE) {
        print('Data submitted!');
      }
    });

    req.open('POST', form.action);
    req.send(JSON.encode(serializeForm(form)));
  });
}

这应该让你开始.

您可能还希望将Polymer用于表单.