logo标签列表

使用$http.get调用外部URL的AngularJS方法

angularjsjson
3

我在使用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>

谢谢你。

感谢你。

你尝试在浏览器中访问该URL了吗？你是否收到了404错误？我认为你也可能会遇到跨域问题。 - ste2425
我不确定这是否是代码问题。你能分享更多关于如何发布你的服务器的信息吗？你能否使用任何请求生成器访问该网站，而不需要使用你的Angular客户端？ - Vlad Dekhanov
我在帖子中放了一个假的URL。该URL可以正常工作，响应是一个普通的JSON：http://www.viudadesoubrier.com/angular/model.php。 - Bibliotec
你能提供在开发者工具>网络中请求和响应中看到的内容吗？ - lisa p.
我收到了“未定义错误”。 - Bibliotec
你的服务器端启用了CORS吗？由于你正在从一个域向另一个域发出请求，所以你需要启用CORS。我尝试了你的代码，但是我得到了“请求资源没有设置'Access-Control-Allow-Origin'头部”的错误信息。 - Pratap A.K
1个回答
6

控制器：

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: *
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接