Przykładowy formularz do Google Dart Form

Question

Obecnie próbuję utworzyć prosty formularz w Dart z prostą nazwą użytkownika i adresem e-mail do celów rejestracji.

nie mogę znaleźć kompletną roboczą przykład, że mogę przetestować. Jeśli ktoś może wyjaśnić, jak przekonwertować kod jQuery poniżej do Dart, myślę, że to by znacznie wyjaśniło.

Widziałem również klasę FormData dla Dart, ale bez przykładów. Każda pomoc jest doceniana.

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

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

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

Answer 1

Pierwszy import dwie biblioteki:

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

Następnie definiujemy funkcję serializer:

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

To po prostu serializes formularz do Map danych. Nie znam serializera postaci Dart, może istnieć jakiś pakiet do tego celu. Zauważ, że powyższy przykład dotyczy tylko wejść.

Następny przyjmiemy następujące HTML:

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

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

i ostatni nasz Dart kod po stronie klienta do obsługi postać:

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

To powinno Ci zacząć.

Możesz również użyć formularza Polymer.

Answer 2

Praca nad powyższym przykładem. Możesz zrobić coś takiego również.

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