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

发布时间：2020-12-17 07:09:35 所属栏目：安全来源：网络整理

导读：我有一个角度的问题和调用外部json,事实是本地工作完美,但当我用完整的URL打电话给我404,我留下代码,以防你看到丢失的东西,谢谢： // JavaScript Documentvar angularTodo = angular.module('lostsysApp',[]);function mainController($scope,$http) { $scop

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!