Google Dart 表单工作示例答案

【问题标题】：Google Dart Forms working exampleGoogle Dart 表单工作示例
【发布时间】：2012-12-06 13:46:02
【问题描述】：

我目前正在尝试在 Dart 中创建一个简单的表单，只需一个用户名和电子邮件用于注册目的。

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

我还看到了 Dart 的 FormData 类，但没有示例。任何帮助表示赞赏。

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

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

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

【问题讨论】：

标签： jquery dart

【解决方案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。

【讨论】：

一个运行的开始。谢谢你这么详细的解释。
我试过用它，但是好像很多东西都变了。例如，dart:json 现在以不同的方式包含在 dart:convert 中，并且代码 form.elements.forEach((Element el) { if (el is InputElement) data[el.name] = el.value; }); 给出了错误（There is no such getter 'elements' in 'FormElement'）我还注意到 query(selector) 现在是 querySelector(selector)
还是有问题。出于某种原因，HttpRequestProgressEvent 未被识别为一个类。他们改名了吗？
啊，是的，我的错，现在是ProgressEvent :)

【解决方案2】：

处理上面的例子。你也可以这样做。

    main(){
    var form = new FormData(query('#myForm');
    var button = query('#mySubmit');

     button.onClick.listen((e){
         var request = new HttpRequest();
         request.on.readyStateChange.add((HttpRequestProgressEvent e) {
           if (request.readyState == HttpRequest.DONE) {
             print('Data submitted!');
             }
           });
          request.open('POST','http://localhost/form_info.php');
          request.send(form);
        });
      }

【讨论】：