如何在 AngularJS/Express 应用程序中从表单中获取数据
how to get data from a form in angularjs/express app
大家好,我可以知道如何从 angularjs/express 应用程序中的表单中获取数据吗?例如
索引.js路由
app.post('/register', sessionHandler.handleSignup);
句柄注册函数
有没有办法在不使用req.body
的情况下获取数据?因为 AngularJS 阻止我提交表单,所以我不得不考虑另一种方法来获取数据。
this.handleSignup = function(req, res, next) {
"use strict";
var email = req.body.email,
confirmEmail = req.body.confirmEmail,
password = req.body.password,
confirmPassword = req.body.confirmPassword,
firstName = req.body.firstName,
lastName = req.body.lastName,
penName = req.body.penName,
publicUsername = req.body.publicUsername;
// set these up in case we have an error case
var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName};
if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) {
users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) {
"use strict";
if (err) {
// this was a duplicate
if (err.code == '11000') {
errors['email_error'] = "Email already in use. Please choose another";
return res.render("register", errors);
}
// this was a different error
else {
return next(err);
}
}
sessions.startSession(user['_id'], function(err, session_id) {
"use strict";
if (err) return next(err);
res.cookie('session', session_id);
return res.redirect('/');
});
});
} else {
console.log("user did not validate");
return res.render("register", errors);
}
}
控制器(如果有错误,有没有办法使页面保持在同一页面上?如果没有错误,则重定向到"/"(
function RegisterCtrl($scope, $http, $location) {
$scope.form = {};
$scope.submitPost = function() {
$http.post('/register', $scope.form).
success(function(data) {
$location.path('/');
});
};
}
我的表格
<div class="pure-u-1 text-center">
<form method="post" class="pure-form pure-form-aligned">
<fieldset>
<legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1>
</legend>
<p class="text-center red">{{email_error}}</p>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input required name="email" ng-model="form.email" class="pure-u-1-3" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmEmail_error}}</p>
<label for="confirmEmail">Confirm Email Address</label>
<input required name="confirmEmail" ng-model="form.confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{password_error}}</p>
<label for="password">Password</label>
<input required name="password" ng-model="form.password" class="pure-u-1-3" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmPassword_error}}</p>
<label for="confirmPassword">Confirm Password</label>
<input required name="confirmPassword" ng-model="form.confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password">
</div>
<br/><br/>
<div class="pure-control-group">
<label for="firstName">First Name</label>
<input required name="firstName" class="pure-u-1-3" ng-model="form.firstName" type="text" placeholder="Your first name">
</div>
<div class="pure-control-group">
<label for="lastName">Last Name</label>
<input required name="lastName" class="pure-u-1-3" ng-model="form.lastName" type="text" placeholder="and your last name">
</div>
<div class="pure-control-group">
<label for="penName"><abbr title="A pen name">Nom de plume</abbr></label>
<input required name="penName" ng-model="form.penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien">
</div>
<div class="pure-control-group">
<label for="publicUsername">Public Username</label>
<input required name="publicUsername" class="pure-u-1-3" type="text" ng-model="form.publicUsername" placeholder="Username eg:gandalf">
<p class="pure-splash-subhead">https://www.HoneyBooBoo.com/@<b class="maroon">{{form.publicUsername}}</b></p>
<p class="text-center red">{{publicUsername_error}}</p>
</div>
<div class="pure-u-1 ">
<label for="conAndTerm" class="pure-checkbox">
<input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a>
</label>
<br/>
<input type='submit' ng-click="submitPost()" class="pure-button pure-button-secondary pure-u-1-3" value="Register">
<br/>
</div>
</fieldset>
</form>
</div>
您似乎将Angular的单页应用程序(SPA(概念与传统的基于服务器的模型混淆了。使用 SPA,服务器不会执行任何重定向或提供 HTML。您的服务器发送 JSON,然后 Angular 在客户端渲染所有页面。
看起来请求对象可能没有正确传递到服务器端注册函数,这就是无法访问 req.body 的原因。您的 Angular 代码看起来是正确的。
我将从我自己的项目中为您提供一些代码,这些代码完全可以满足您的需求。
在索引内.js路由
var signup = require('./routes/signup');
app.post('/signup', function(req, res) {
signup(req, res);
});
路线/注册.js
module.exports = function (req, res) {
validateSignup(req.body, function(error, data) {
if(error) {
res.send(400, error.message);
} else {
res.send(JSON.stringify(data));
}
})
}
function validateSignup(data, callback) {
// All your validation logic goes here
if(success) callback(null, newuser);
else callback(new Error('Registration failed!'), null);
}
公共目录中的 html 文件
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Sample Registration Page</title>
<link href="styles/bootstrap.css" rel="stylesheet">
<link href="styles/signin.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="SignupCtrl">
<div class="alert alert-danger" ng-if="errorMessage">{{errorMessage}}</div>
<form class="form-signin">
<h2 class="form-signin-heading">Register</h2>
<input type="text" class="form-control" name="username" placeholder="Username" ng-model="User.username" required autofocus>
<input type="password" class="form-control" name="password" placeholder="Password" ng-model="User.password" required>
<button class="btn btn-lg btn-primary btn-block" ng-click="register()">Register</button>
</form>
</div> <!-- /container -->
<script type="application/javascript" src="lib/angular/angular.min.js"></script>
<script type="application/javascript" src="scripts/controllers/register.js"></script>
</body>
</html>
最后注册.js
angular.module('app', [])
.controller('SignupCtrl', function ($scope, $http, $location) {
$scope.User = {};
$scope.errorMessage = '';
$scope.register = function() {
$http.post('/signup', $scope.User).
success(function(data) {
$location.path('/');
}).error(function(err) {
$scope.errorMessage = err;
});
}
});
我已经测试过了,只要您在服务器端正确填写所有注册逻辑,它应该也适合您。注意:要使重定向正常工作,您需要设置 Angular 路由并创建要重定向到的页面。
在角度控制器中,您可以将内部数据与ng-model="form.email"
一起使用$scope.form.email
然后,您可以使用HTTP请求或其他类似WebSockets将其发送到NodeJS应用程序。
在应用中定义ng-app
。然后处理数据使用ng-model
。
模板输入字段应具有用于处理数据的数据模型。
喜欢电子邮件
<input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address" ng-model="form.email">
- 如何从pdftron webviewer获取表单数据
- 如何从html页面中的表单获取值's变量
- 使用 jquery ajax 从 Bootstrap 3 模态表单获取数据
- JQuery & HTML:如何使用echo $_POST将数据从一个表单获取到另一个表单
- 将数据从表单获取到骨干中的集合
- Ajax/PHP 表单获取序列化选择值
- 从nodejs中的表单获取json文件内容
- 如何从html表单获取纬度经度值到谷歌地图
- 从表单获取值并显示消息的JavaScript
- 从HTML表单获取值
- 创建一个复杂的html5表单.获取动态表单数据.Id vs Name
- 流星表单获取带有动态名称的输入值
- Jquery表单获取默认值
- 只有在字段满足时才发送表单(获取)数据(不是验证)
- 为什么我得到这个错误时,试图从一个表单获取数据
- 在lotus notes中从另一个表单获取字段值,以便在web上执行验证
- Dojo表单获取值
- 将从 HTML 表单获取的值传递到位于单独.js脚本中的 TaffyDB 数据库中
- JavaScript 从联系表单获取访问者的先前 URL
- Javascript与HTML表单获取值