角度を使用してクロスドメイン上にデータをポストします

角度jsで新しくなりました。私は他のhtmlページにデータを投稿しなければならないページを作成してから、角度を使って他のページにデータを受け取らなければなりません。角度を使用してクロスドメイン上にデータをポストします

小さなアプリケーションを作成しました。私はhome.htmlページからgetdata.htmlページへの投稿データを持っており、getdata.htmlページではそのデータを受け取らなければなりません。フォームの投稿のみを使用してデータを取得する必要があります。 Iは、POST要求を使用して、ヘッダのデータを渡す必要があり、その後、私はそれを

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>

出典

2017-06-12 Anshul Johri

問題は何ですか？ –

フォームを送信してフォームを送信すると（ng-submit）、別のページが読み込まれない405エラーが発生し、このデータを受け取る方法がわからない –

データを投稿する必要はないと思うそれをそのコントローラー/ビューに渡します。ファクトリを使用してデータを保存し、ファクトリを呼び出して取得する必要があります。 – alphapilgrim

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

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

私はこのlinkはこれを試してみてください、あなたに

出典

2017-06-12 16:03:58

私はDBや任意のサービスではないhtmlページにデータを投稿する必要があります –

を助けることができると思います。まず、HTMLフォームにいくつかの変更を加える必要があります。メソッドを削除してng-submitを使用してください。次に、ファクトリを登録して、そこからデータを保存および取得する必要があります。ウィンドウ/状態がリフレッシュされると、データは保持されないことに注意してください。これがあなたが望むものであれば（別の質問のために）他の手段を探求する必要があります。メインコントローラに範囲指定された関数を追加して、送信時にユーザーを保存し、その呼び出しの成功をあなたにリダイレクトします。

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>

出典

2017-06-12 16:34:39 alphapilgrim

私は同じドメインでデータを受信した場合、工場はデータを失う。あるドメインからいくつかのデータを渡して、それを他のドメインに受け取らなければならない場合のオプションは何ですか？例えば、私はabc.com/home.htmlからデータを投稿する必要があり、xyz.com/about.htmlに送信する必要があります。ここで、home.htmlとabout.htmlは異なるドメイン（Webサイト）のページです。 –

@AnshulJohriあなたはDBのような保存データが必要です。両方のサイトから取得するエンドポイントを定義できます。 – alphapilgrim

DBは他の方法ではありません。 asp.netに.aspxページのポストデータの概念があり、データページからデータを取得することができます。 –

角度を使用してクロスドメイン上にデータをポストします

答えて

関連する問題