json angularjs 使用 $http.get 调用外部 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35032511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-09-03 18:15:36 来源:igfitidea点击:
angularjs call to an external url with $http.get
提问by Bibliotec
I have a problem with angular and calls to an external json, the fact is that local works perfectly, but when I make the call with a full url gives me 404, I leave the code in case you see something missing, thanks:
我有 angular 和调用外部 json 的问题，事实是本地工作完美，但是当我使用完整的 url 进行调用时会给我 404，我留下代码以防您发现遗漏了什么，谢谢：
// JavaScript Document
var angularTodo = angular.module('lostsysApp', []);
function mainController($scope, $http) {
$scope.names = [];
$http.get('http://www.viudadesoubrier.com/angular/model.php')
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
alert(data);
console.log('Error: ' + data);
});
$scope.addNom = function() {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'append', nom: $scope.nom, telefon: $scope.telefon } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.nom="";
$scope.telefon="";
}
$scope.delNom = function( nom ) {
if ( confirm("Seguro?") ) {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'delete', nom: nom } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
}
Add the code of index.html
添加index.html的代码
<!doctype html>
<html ng-app="lostsysApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<div class="jumbotron text-center">
<h1>Angular Test</h1>
</div>
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="form-group">
<input type="text" ng-model="nom" placeholder="Contact Name" class="form-control input-lg text-center" />
</div>
<div class="form-group">
<input type="text" ng-model="telefon" placeholder="Phone Number" class="form-control input-lg text-center" />
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg" ng-click="addNom()">A?adir</button>
</div>
<div ng-repeat="n in names">
<p>
{{n.nom}} ({{n.phone}})
<a href="#" ng-click="delNom(n.nom)">[X]</a>
</p>
</div>
</div>
</body>
</html>
Thank you.
谢谢你。
回答by Pratap A.K
controller :
控制器 ：
var angularTodo = angular.module('lostsysApp', []);
angularTodo.controller('mainController', function($scope, $http) {
$scope.names = [];
$http.get('http://www.viudadesoubrier.com/angular/model.php')
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
alert(data);
console.log('Error: ' + data);
});
$scope.addNom = function() {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'append', nom: $scope.nom, telefon: $scope.telefon } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.nom="";
$scope.telefon="";
}
$scope.delNom = function( nom ) {
if ( confirm("Seguro?") ) {
$http.post('http://www.viudadesoubrier.com/angular/model.php', { op: 'delete', nom: nom } )
.success(function(data) {
$scope.names = eval(data);
console.log(data)
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
});
Enable CORS from server side
从服务器端启用 CORS
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
