飞镖：AJAX表单提交

郗亦

2023-03-14

问题内容：

请注意：我对使用Polymer对此不感兴趣；我想使用“纯”飞镖！

我正在尝试为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：将qE类型的值转换为不兼容的Yu类型

我想这是一个AJAX请求，这样用户就没有必须要经历一个重新加载页面（这里的意图是成为一个单页的应用程序）。

关于这里发生的事情有什么想法吗？我几乎100％确信问题不在服务器端，所以现在我不发布服务器代码。但是如果需要，我将使用服务器代码更新我的问题。

问题答案：

这是一个例子，如何做到这一点

表单，HTTP服务器和带有Dart的Polymer

当你改变

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;

    ...
}

飞镖：AJAX表单提交

相关阅读

相关文章

相关问答

相关工具

相关文档