7

現在、登録目的でユーザー名と電子メールだけを使用して、Dart で簡単なフォームを作成しようとしています。

テストできる完全に機能する例が見つかりません。以下のjQueryコードをDartに変換する方法を誰かが説明できれば、非常に明確になると思います。

FormDataまた、Dart のクラスを見てきましたが、例はありません。どんな助けでも大歓迎です。

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

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

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

2 に答える 2

11

最初に 2 つのライブラリをインポートします。

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を使用することもできます。

于 2012-12-06T16:42:57.460 に答える