使用angular在跨域上发布表单数据 [英] post form data over cross domain using angular
问题描述
我是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页面上，我必须接收该数据.我必须仅使用表单发布来获取数据.我必须使用发布请求在标头上传递数据，然后必须接收它
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
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
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>
这篇关于使用angular在跨域上发布表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
