Dart: AJAX form submit | 易学教程

Please note: I am not interested in using Polymer for this; I want to use "pure" Dart!

I am trying to build a simple sign-in screen for my Dart app, and am having difficulty getting the two form variables (email and password) to POST to the server-side:

Here's my main HTML file (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>

Here's my main Dart file (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.");
}

When I run this in a browser I see the sign in screen appear, but when I click the signin button nothing happens, and Firebug throws a bunch of errors on the cross-compiled, obfuscated, minified JavaScript:

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

I want this to be an AJAX request so that the user does not have to experience a page reload (the intent here is to be a single page app).

Any ideas as to what's going on here? I'm almost 100% confident the issue isn't on the server-side, so for now I'm omitting to post server code. But I'll update my question with server code if need be.

here is an example how to do this

Forms, HTTP servers, and Polymer with Dart

When you change

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

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

you have access to target

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

    FormElement form = event.target as FormElement;

    ...
}

来源：https://stackoverflow.com/questions/20749740/dart-ajax-form-submit

标签

ajax

post

dart

form-submit