请注意:我对为此使用 Polymer 不感兴趣；我想使用“纯”Dart!
我正在尝试为我的 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% 确信问题不在服务器端，所以现在我没有发布服务器代码。但如果需要，我会用服务器代码更新我的问题。
最佳答案
这是一个例子，如何做到这一点
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;
...
}
关于ajax - Dart:AJAX 表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20749740/