Ví dụ về Google Dart Forms làm việc

Question

Tôi hiện đang cố gắng tạo một biểu mẫu đơn giản trong Dart chỉ với tên người dùng và email cho mục đích đăng ký.

Tôi không thể tìm thấy đầy đủ đang hoạt động ví dụ mà tôi có thể kiểm tra. Nếu ai đó có thể giải thích làm thế nào để chuyển đổi mã jQuery dưới đây để Dart, tôi nghĩ rằng sẽ làm rõ những điều rất nhiều.

Tôi cũng đã thấy lớp học FormData cho Dart nhưng không có ví dụ nào. Bất kỳ trợ giúp được đánh giá cao.

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

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

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

Answer 1

đầu tiên nhập khẩu hai thư viện:

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

Sau đó, chúng ta định nghĩa một hàm 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; 
} 

Nó chỉ đơn giản serializes một dạng thành một Map dữ liệu. Tôi không biết về bộ nối tiếp dạng Dart, có thể có một số gói cho mục đích đó. Lưu ý rằng ví dụ trên chỉ đề cập đến các yếu tố đầu vào.

Tiếp theo chúng ta giả định HTML sau:

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

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

Và kéo Dart client-side code của chúng tôi để xử lý hình thức:

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

Điều này sẽ giúp bạn bắt đầu.

Bạn cũng có thể muốn sử dụng Polymer cho biểu mẫu của mình.

Answer 2

Làm việc với ví dụ trên. Bạn có thể làm một cái gì đó như thế này.

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