Dart: AJAX form submit

Обратите внимание: я не заинтересован в использовании Polymer для этого; Я хочу использовать «чистый» дарт!Dart: AJAX form submit

Я пытаюсь построить простой экран входа для моего Dart приложения, и у меня возникают трудности с получением двух переменных формы (email и password), чтобы POST на стороне сервера:

Вот моя главная HTML-файл (myapp.html):

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Sign in</title> 
     <link rel="stylesheet" href="assets/myapp/myapp/myapp.css"> 
     <link rel="stylesheet" href="assets/myapp/bootstrap/css/bootstrap.min.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <form id="signinForm" method="POST" class="form-signin"> 
       <h2 class="form-signin-heading">Please sign in</h2> 
       <input type="text" class="input-block-level" name="email" placeholder="Email address"> 
       <input type="password" class="input-block-level" name="password" placeholder="Password"> 
       <button class="btn btn-large btn-primary" id="signinBtn" type="submit">Sign in</button> 
      </form> 
     </div> 
     <script type="application/dart" src="myapp.dart"></script> 
     <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

Вот мой главный Dart файл (myapp.dart):

import 'dart:html'; 

void main() { 
    querySelector("#signinForm") 
     ..onClick.listen(handle); 
} 

void handle(MouseEvent mouseEvent) { 
    mouseEvent.preventDefault(); 

    FormElement formElement = mouseEvent.target as FormElement; 

    var url = "http://localhost:8080/myapp/signinService"; 

    var request = HttpRequest.request(
     url, 
     method: formElement.method, 
     sendData: new FormData(formElement) 
    ).then(onDataLoaded); 
} 

void onDataLoaded(HttpRequest req) { 
    String response = req.responseText; 
    if(response == 1) 
     window.alert("You are signed in!"); 
    else 
     window.alert("Sign in failed. Check credentials."); 
}

Когда я запускаю это в браузере, я вижу знак на экране появится, но когда я нажимаю на кнопку для входа в аккаунт ничего не происходит, и Firebug выбрасывает кучу ошибок на кросс-компиляции затемненный, уменьшенная JavaScript:

: CastError: Casting value of type qE to incompatible type Yu

Я хочу, чтобы это был запрос AJAX, так что пользователь не должен испытать перезагрузку страницы (целью здесь является одностраничное приложение).

Любые идеи относительно того, что здесь происходит? Я почти на 100% уверен, что проблема не на стороне сервера, поэтому пока я не могу отправить код сервера. Но я буду обновлять свой вопрос с помощью кода сервера, если это необходимо.

источник

2013-12-23 IAmYourFaja

вот пример того, как сделать это

Forms, HTTP servers, and Polymer with Dart

При изменении

void main() { 
    querySelector("#signinBtn") 
     ..onClick.listen(handle); 
}

void main() { 
    querySelector("form") 
     .onSubmit.listen(handle); 
}

у вас есть доступ к целевому

void handle(Event event) { 
    event.preventDefault(); 

    FormElement form = event.target as FormElement; 

    ... 
}

источник

2013-12-23 19:26:55

Как всегда, еще раз спасибо @Gunter Zochbauer (+1) - Я должен был сказать это с самого начала (и обновил свой вопрос соответственно), но сейчас меня не интересует использование Polymer. В конечном итоге я, вероятно, перейду на Polymer и/или Angular, но сейчас хочу узнать «чистый» дарт (без фреймворков). Еще раз спасибо! – IAmYourFaja

Я думаю, что в любом случае вы должны получить то, что хотите от этого примера. Просто то, как вы привязываетесь к событиям и как вы обращаетесь к значениям из полей формы, отличается. –

Что я пропустил в вашем примере, где вы назначаете адрес электронной почты и пароль для запроса. Фактически вы ничего не посылаете на сервер. –

Dart: AJAX form submit

ответ

Смежные вопросы