如何在 AngularJS/Express 应用程序中从表单中获取数据

how to get data from a form in angularjs/express app

本文关键字:表单 获取 数据 应用程序 Express AngularJS      更新时间:2023-09-26

大家好,我可以知道如何从 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">