[英]AngularJS - how can I send data to the php page with $http.post?
[英]I can't send new datas with $http.post in AngularJS
我有這些代碼:
app.js(路由器):
(function(){
var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);
//here is declared the routers
pizzasApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).
when('/',{
redirectTo:'/pizzas'
}).
when('/pizzas/:pizzaId',{
templateUrl: 'pizza-detail.html',
controller: 'PizzasDetailController'
}).
otherwise({
redirecTo: '/pizzas'
});
}]);
})();
configure.js(控制器):
(function(){
var app = angular.module('app',[]);
//In this controller is got all pizzas from JSON file and post new pizzas
app.controller('PizzasController',['$scope','$http',function($scope,$http){
$http.get('http://162.250.78.47/api/pizzas').success(function(data){
$scope.pizzas = data;
});
//WHEN CLICK THE BUTTON FORM FROM pizza-list.html THIS ADD NEW PIZZA. BUT THIS DOESN'T WORK
$scope.save = function(){
$http.post('http://162.250.78.47/api/pizzas',$scope.pizzas).then(function(data){
$location.path('/pizzas');
});
};
}]);
//In this controller I get a selected pizza with ingredients
app.controller('PizzasDetailController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
$scope.pizzaId = $routeParams.pizzaId;
$http.get('http://162.250.78.47/api/pizzas/'+$scope.pizzaId).success(function(data){
$scope.pizza = data;
});
$http.get('http://162.250.78.47/api/ingredients').success(function(ingr){
$scope.ingrs = ingr;
});
}])
})();
index.html(首頁):
<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="configure.js"></script>
<title>New Web Project</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
pizza-list.html(比薩餅列表和添加新比薩餅的表單):
<div ng-repeat="nombre in pizzas">
<p><a href="#/pizzas/{{nombre._id}}">{{nombre.name}}</a></p>
</div>
<!-- HERE IS THE PROBLEM -->
<form>
<label>Write the pizza name that you want add:</label></br>
<input type="text" ng-model="pizzas.name" placeholder="Pizza">
<button ng-click="save()">Add</button>
</form>
pizza-detail.html(含比薩餅):
<div>
<p>{{pizza.name}}</p>
<div ng-repeat="ing in pizza.ingredients track by $index">
<div ng-repeat="ingr in ingrs">
<div ng-if="ing == ingr._id">
{{ingr.name}}
</div>
</div>
</div>
</div>
我的問題是,當我想以pizza-list.html表單添加新的比薩時,它不起作用。
在點擊“添加”新披薩之前:
在點擊“添加”新比薩之后:
將此錯誤翻譯為英語,例如:
Blocked request from various sources: the same origin policy prevents read http://162.250.78.47/api/pizzas remote resource. This can be fixed by moving the action to the same domain or activating CORS.
該錯誤已經回答了您的問題(您從未問過)。 您正在嘗試將數據提交到其他主機,而不是您的角度應用程序正在運行。
用外行術語來說:您正在本地主機上運行應用程序,但向162.150.78.47提供數據。 由於安全限制,不允許這樣做。
可能的解決方案:
1)將所有內容托管在同一域(例如localhost)
2)在API端啟用CORS。 我不知道您使用什么技術,但是在C#中,您必須將[EnableCors]添加到您的控制器中,這允許交叉請求。
3)查看JSONP。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.