使用角度跨域发布表单数据

2022-01-19 00:00:00 frontend angularjs javascript mean-stack

我是 Angular js 的新手.我已经创建了页面，我必须将数据发布到其他 html 页面，然后我必须使用 angular 在其他页面中接收数据.

I am new in angular js. I have create page where I have to post data to other html page and then I have to receive the data in other page using angular.

我创建了一个小应用程序.我已将 home.html 页面中的数据发布到 getdata.html 页面，并且在 getdata.html 页面上我必须接收该数据.我必须仅使用表单发布来获取数据.我必须使用 post 请求在标头上传递数据，然后我必须接收它

I have create a small application. I have post data from home.html page to getdata.html page and on getdata.html page I have to receive that data. I have to get data using form posting only. I have to pass data on header using post request and then I have to receive it

test.js 

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: 'home.html',
        controller: 'StudentController'
    }).when('/getdata', {
        templateUrl: 'getdata.html',
        controller: 'getdataController'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

mainApp.controller('StudentController', function($scope,$location,$window) {
 $scope.user = {firstName:"John", lastName:"Doe"};
});
mainApp.controller('getdataController', 
function($scope,$location,$window,$routeParams) { 
 alert("Get Data"); 
});

getdata.html

getdata.html

<div ng-controller='getdataController'>
<h2>Get Data</h2>
</div>

home.html

<div class="container" ng-controller='StudentController'>
<h1>Post Form Data</h1> 
<form novalidate method="post" action='http://localhost/#/getdata'>
<input type='hidden' value='Mohan' name="hiddenfld1"/>
<input type='hidden' value='Sharma' name="hiddenfld2"/>
<input type='hidden' value='ABC.com' name="hiddenfld3"/>
First Name:<br>
<input type="text" name='fname' ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name='lname' ng-model="user.lastName">
<br><br>
<input type="submit" value="Submit">
</form> 
</div>

index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8"> 
</head>
<body>

  <div ng-app="mainApp">
    <ng-view></ng-view>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</body>

推荐答案

试试这个.首先，您需要对 HTML 表单进行一些更改.删除方法并使用 ng-submit.接下来，您需要注册一个工厂以从中保存和检索数据.请注意，如果窗口/状态被刷新，数据将不会保留.如果这是您想要的(对于另一个问题)，您需要探索其他方法.然后在主控制器中添加一个作用域函数以在提交时添加保存用户并在该调用成功时重定向您.

Try this. first, you need to make some changes in the HTML form. remove method and use ng-submit. next, you need to register a factory to save and retrieve data from it. note that if the window/state is refreshed, data will NOT persist. you need to explore other means if this is what you want(for another question). then add a scoped function in the main controller to add save user on submit and redirect you on the success of that call.

mainApp.controller('StudentController', function($scope, $location, $window, exampleFactory) {
  $scope.user = {
    firstName: "John",
    lastName: "Doe"
  };

  $scope.submitUser = function() {
    exampleFactory.saveUser(user)
      .then(function() {
        $location.path('getdata');
      });
  };
});
mainApp.controller('getdataController',
  function($scope, $location, $window, $routeParams, exampleFactory) {
    exampleFactory.getUserDetails()
      .then(function(user) {
        $scope.user = user;
      });
  });
mainApp.factory('exampleFactory', [function() {

  var currentUser;
  return {
    saveUser: function(userDetails) {
      currentUser = userDetails;
    },
    getUserDetails: function() {
      return currentUser;
    }
  };
}]);


<div class="container" ng-controller='StudentController'>
  <h1>Post Form Data</h1> // do not use method type on angular forms, add no validate, and use the routers native way to redirect.
  <form novalidate ng-submit="submitUser()">
    <input type='hidden' value='Mohan' name="hiddenfld1" />
    <input type='hidden' value='Sharma' name="hiddenfld2" />
    <input type='hidden' value='ABC.com' name="hiddenfld3" /> First Name:<br>
    <input type="text" name='fname' ng-model="user.firstName"><br> Last Name:<br>
    <input type="text" name='lname' ng-model="user.lastName">
    <br><br>
    <input type="submit" value="Submit">
  </form>
</div>

相关文章