我在 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);
});
}
}
}
添加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>
谢谢。
最佳答案
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);
});
}
}
});
从服务器端启用 CORS
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
关于angularjs 使用 $http.get 调用外部 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35032511/