Googleダーツフォームの動作例

Question

現在、登録目的でユーザー名とメールアドレスを使用して簡単なフォームを作成しようとしています。

私は完全に見つけることができません私がテストできる例。下の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;  
    }); 
}); 

Answer 1

最初のインポートの2つのライブラリ：

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にフォームをシリアライズ：

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

はその後、我々は、シリアライザ関数を定義します。私は、Dartフォームシリアライザを認識していないので、その目的のためにいくつかのパッケージがあるかもしれません。上記の例は入力のみを扱うことに注意してください。

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

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

とフォーム処理のための私達のダートクライアント側のコードを最後：

次は、次のHTMLを想定

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

Answer 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); 
     }); 
     }