2012-12-06 3 views
7

현재 등록 목적으로 사용자 이름과 이메일을 사용하여 간단한 양식을 다트에 만들려고합니다.Google 다트 양식 작업 예

테스트 할 수있는 예제를 찾을 수 없습니다. 아래의 jQuery 코드를 Dart로 변환하는 방법을 누군가가 설명 할 수 있다면, 그 점이 크게 분명해질 것이라고 생각합니다.

또한 나는 다트하지만 예는 FormData 클래스를 보았다. 어떤 도움을 주셔서 감사합니다.

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

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

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

답변

11

먼저 가져 두 라이브러리 :

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

그런 다음 우리는 시리얼 라이저 기능을 정의합니다. 나는 다트 양식 시리얼 라이저를 인식하지 못하고 있는데, 그 목적을위한 패키지가있을 수 있습니다. 위의 예제는 입력 만 처리합니다.

다음으로 우리는 다음과 같은 HTML 가정

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

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

을 그리고 폼 처리를위한 우리의 다트 클라이언트 측 코드를 지속 :

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을 사용할 수도 있습니다.

+0

실행 시작. 자세한 설명을 해주셔서 감사합니다. – basheps

+0

사용하려고 시도했지만 많은 부분이 변경된 것으로 보입니다. 예를 들어,'dart : json'은'dart : convert'와 코드'form.elements.forEach (Element 엘) { if (엘이 InputElement 인 경우)와 다른 방식으로 포함됩니다. data [el.name] = el.value; });'나는 또한 쿼리 (선택)는''querySelector (선택)' – dieortin

+0

지금 '것으로 나타났습니다) FormElement'''오류 ('그런 게터 '요소'가 있습니다 @ dieortin 나는 내 대답을 업데이트했다. –

0

위의 예에서 작업하십시오. 너도 이와 비슷한 것을 할 수있다.

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