angularjs使用$http.get调用外部URL

我有一个角度的问题和调用外部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>

谢谢.

解决方法

控制器：

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',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',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

解决方法

猜你在找的Angularjs相关文章