angularjs調用外部URL與$ http.get

我有一個角度和調用一個外部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>

的代碼謝謝。

來源

2016-01-27 Bibliotec

您是否嘗試過打在你的瀏覽器，網址CORS？那麼你有404嗎？儘管如此，我希望你們也能得到跨國問題。 – ste2425

我不確定它是否是代碼交易。你能分享更多的信息你是如何發佈你的服務器的？你可以用沒有你的角度客戶端的任何請求發生器訪問該網站嗎？ –

我在帖子中放了一個虛假的網址。該網址正常工作的響應是一個正常的JSON：http://www.viudadesoubrier.com/angular/model.php。 – Bibliotec

控制器：

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); 
         }); 
       } 
      } 
     });

啓用從服務器端

Access-Control-Allow-Headers: Content-Type 
Access-Control-Allow-Methods: GET, POST, OPTIONS 
Access-Control-Allow-Origin: *

來源

2016-01-27 10:30:42

它完美地工作。謝謝。 – Bibliotec

angularjs調用外部URL與$ http.get

回答

相關問題