post form data over cross domain using angular

Question

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.

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

<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>

when i post form using form submit(ng-submit) then another page is not loading 405 error comes and I don't know how to receive this data — Anshul Johri, Jun 12 '17 at 16:00
I don't think you need to 'post' data, you just need to pass it on to that controller/view. you should use a factory to save the data and call the factory to retrieve it. — alphapilgrim, Jun 12 '17 at 16:12

Suraj Khanal · Answer 1 · 2017-06-12T16:13:27.073

0

app.controller('example-ctrl',$scope,$http){

$scope.saveFormData = function(argument_list){
   $http.post('url',data,header).then(function(response){
    // success response
  },function(error){
    // error 
  });
 }
}

I think this link can help you

edited Jun 12 '17 at 16:13

answered Jun 12 '17 at 16:03

Suraj Khanal

498
8
26

I have to post data on html page not on DB or any service – Anshul Johri Jun 12 '17 at 16:07

score 0 · Answer 2 · answered Jun 12 '17 at 16:34

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>

It would main data if i receive data with in same domain, but for different domain i think factory will lose the data. What is the option if i have to pass some data from one domain and receive it to other domain. For example : I have i to post data from abc.com/home.html and i have to receive it to xyz.com/about.html where home.html and about.html are page on different different domain(web site) . — Anshul Johri, Jun 12 '17 at 17:21
@AnshulJohri you need some way a saving data, like a DB. then you can define an endpoint to retrieve from both sites. — alphapilgrim, Jun 12 '17 at 17:33
Not DB is it any other best way. There is concept in asp.net for post data on an .aspx page and get data from data page can i do the same in angular — Anshul Johri, Jun 12 '17 at 17:37
@AnshulJohri for one we have no idea what the DB setup looks like much less how to interact with it. two, I think that's outside the scope of this question. — alphapilgrim, Jun 12 '17 at 18:08
my first question is that is it possible to post data over cross domain without using DB in angular if yes then how — Anshul Johri, Jun 13 '17 at 04:42

post form data over cross domain using angular

2 Answers2

Linked