Javascript 使用angularjs将HTML表单数据从页面提交到另一个HTML页面

我需要简单的表单提交从HTML到HTML页面使用angularjs。 我尝试使用本地存储广播服务注入器等，但不工作，请帮助

我的密码在这里

HTML代码：

<form name="personForm1" action="form2.html" method="post" novalidate>
  <label for="firstNameEdit1">First name:</label>
  <input id="firstNameEdit1" type="text" name="firstName" ng-model="firstName" required /><br />
  <label for="lastNameEdit1">Last name:</label>
  <input id="lastNameEdit1" type="text" name="lastName" ng-model="lastName" required /><br />
  <br />
  <button type="submit">Submit</button>
</form>

angular.module("mainModule", [])
 .controller("mainController", function($scope, $http) {
   $scope.firstname = {};
   $scope.lastname = {};


   $scope.submitData = function(person, resultVarName) {
     var config = {
       params: {
         person: person
     }
   };

   $http.post("Form2.html", null, config)
     .success(function(data, status, headers, config) {
       $scope[resultVarName] = data;
     })
     .error(function(data, status, headers, config) {
       $scope[resultVarName] = "SUBMIT ERROR";
     });
   };
 });

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
   .when('/home', {
     templateUrl: 'template.html',
     controller: 'Ctrl'
   })
   // route for the welcome/dashboard page
  .when('/welcome/:userName', {
    templateUrl: 'welcome.html',
    controller: 'welcomeCtrl'
  })
  // route for the forgot/Recover password page
  .when('/forgotPass', {
    templateUrl: 'forgotPass.html',
    controller: 'forgotPassCtrl'
  })
  //fallback url if nothing matches
  .otherwise({
    redirectTo: '/home'
  })
}]);

---

Angular js

是spa框架，这意味着只有一个主html页面可以是应用程序的

主页/默认

页面，其他页面（如登录/忘记密码）将存储为

模板

，并在该主页内呈现

您可以将此过程视为一种

swap-in-swap-out

逻辑，每当需要呈现任何页面时，都会将旧页面（模板）替换掉，并呈现新页面（模板）

---

请参阅此演示以更好地了解此过程

下面是plunker的一些主要内容 路由代码：

<form name="personForm1" action="form2.html" method="post" novalidate>
  <label for="firstNameEdit1">First name:</label>
  <input id="firstNameEdit1" type="text" name="firstName" ng-model="firstName" required /><br />
  <label for="lastNameEdit1">Last name:</label>
  <input id="lastNameEdit1" type="text" name="lastName" ng-model="lastName" required /><br />
  <br />
  <button type="submit">Submit</button>
</form>

angular.module("mainModule", [])
 .controller("mainController", function($scope, $http) {
   $scope.firstname = {};
   $scope.lastname = {};


   $scope.submitData = function(person, resultVarName) {
     var config = {
       params: {
         person: person
     }
   };

   $http.post("Form2.html", null, config)
     .success(function(data, status, headers, config) {
       $scope[resultVarName] = data;
     })
     .error(function(data, status, headers, config) {
       $scope[resultVarName] = "SUBMIT ERROR";
     });
   };
 });

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
   .when('/home', {
     templateUrl: 'template.html',
     controller: 'Ctrl'
   })
   // route for the welcome/dashboard page
  .when('/welcome/:userName', {
    templateUrl: 'welcome.html',
    controller: 'welcomeCtrl'
  })
  // route for the forgot/Recover password page
  .when('/forgotPass', {
    templateUrl: 'forgotPass.html',
    controller: 'forgotPassCtrl'
  })
  //fallback url if nothing matches
  .otherwise({
    redirectTo: '/home'
  })
}]);

用于导航到新模板、附加参数（如果有）的代码

$location.path（“/welcome/”+$scope.userName）

水疗有很多优点：


一些通常出现在大多数页面上的常见组件可以放在main中，并且只有特定的html快照在主页上被交换，这样就不会重复同一段代码
由于不是每次页面导航时都呈现页眉/页脚等常见组件，因此呈现时间得到了改进
有助于实现常见组件（如页眉/页脚）的关注点分离，从而提高代码的模块性和可读性
尝试使用
GET
而不是
POST
，它应该会将值添加到查询字符串中，这样您就可以通过这种方式访问它们。您可以详细说明“使用angularjs从HTML到HTML页面”吗？我的意思是，您正在尝试直接发布到HTML页面，或者使用php、aspnet mvc、web表单等技术。angularjs用于SPA（单页应用程序），因此我强烈建议您改变想法和应用程序的结构。一旦我从fom1.html提交表单，它应该转到form2.html，并在那里显示提交的数据。例如：在form2.html中，它应该显示hi用户名和姓氏。我的控制器代码在这里是angular.module（“mainModule”，[]）.controller（“mainController”，函数（$scope，$http）{$scope.firstname={}；$scope.lastname={}；$scope.submitData=function（person，resultVarName）{var config={params:{username:username}}；$http.post（“Form2.html”，null，config）请在plunker script.js中进行检查，以便在提交过程中将数据从一页传递到另一页