2013-07-27 16 views
10

phương pháp bài của tôi là một cái gì đó như thế này:Cách đọc tiêu đề Vị trí từ API POST trong angularjs?

public HttpResponseMessage AddUser(User user) 
    { 
     UserManager userManager = new UserManager(); 
     try 
     { 
      userManager.Create(user); 

      var savedUser = userManager.FindUserByClientId(user.ClientId); 
      HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, user); 
      response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = savedUser.Id })); 
      return response; 
     } 
     catch(Exception ex) 
     { 
      return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex.Message); 
     } 

    } 

Trong góc, tôi đang cố gắng để đọc mà Location tiêu đề nhưng cho đến nay tôi vẫn không thể.

return $http.post('http://localhost:30028/api/values/adduser', user) 
     .success(function (data, status, headers, config) { 
      alert(angular.toJson(data)); 
      alert(angular.toJson(status)); 
      alert(angular.toJson(headers)); 
      alert(angular.toJson(config)); 
     }; 

Tôi chỉ kiểm tra nội dung của từng nội dung đó và không có nội dung nào có tiêu đề vị trí. Có cách nào trong góc để truy cập vào tiêu đề vị trí để tôi biết url của đối tượng mới của tôi không?

Trả lời

18

According to the documentation, đối tượng headers thực sự là một hàm trả về tiêu đề, như vậy:

.success(function(data, status, headers, config) { 
    alert(headers('Location')); 
}); 

Nếu bạn muốn có một bộ sưu tập của tất cả các tiêu đề, bạn có thể làm điều này:

.success(function(data, status, headers, config) { 
    console.log(headers()); 
}); 

Lưu ý: Nếu máy chủ của bạn đặt mã phản hồi là 301 hoặc 302, bạn sẽ không phải mới có thể để có được tiêu đề Location, vì nó sẽ được tự động và minh bạch theo sau bởi đối tượng XMLHttpRequest.

Vì vậy, hãy đảm bảo bạn đang đặt mã phản hồi chính xác. Tôi đã thử nghiệm này trong PHP (mà tôi không sử dụng nhiều), và đã quên rằng thiết lập một tiêu đề Location tự động thiết lập mã phản hồi. Để kiểm tra điều này, tôi đã sử dụng:

header('Location: blah-blah', true, 200); 

Dưới đây là mẫu mã làm việc của tôi, chỉ cần lưu nó vào location-test.php trên máy chủ PHP và chạy nó:

<?php 

if(isset($_GET['q'])) { 
    header('Content-Type: application/json'); 
    header('Location: user/1', true, 200); 
    echo json_encode(array('query' => $_GET['q'])); 
} else { 

?> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script> 
    <script type='text/javascript'>//<![CDATA[ 

angular.module('myApp', []) 
.controller("myController", function($scope, $http) { 
    $scope.loc = "Loading..."; 
    $http.get('location.php?q=hello') 
     .success(function (data, status, header, config) { 
      console.log(header()); 
      $scope.loc = header('Location'); 
     }) 
     .error(function(data, status) { 
      console.log((data || 'Req Failed') + ': ' + status); 
     }); 
}); 
    //]]></script> 

</head> 
<body> 
    <div ng-app="myApp" ng-controller="myController"> 
     Location Header: {{loc}} 
    </div> 
</body> 
</html> 

<?php 

} 
+0

Điều này không vi phạm HTTP? Vị trí không phải là đi với 200. –

+0

@ MikaelÖstberg nó đi với 202s tốt. http://farazdagi.com/blog/2014/rest-long-running-jobs/ –

1

Kể từ .success() bị phản đối trong $ http và đã được thay thế bằng .then() cập nhật cho câu trả lời này là gọi số header trực tiếp trên phản hồi được đưa vào lời hứa.

$http.post('http://localhost:30028/api/values/adduser', user) 
    .then(function (response) { 
     alert(angular.toJson(response.headers)); 
     //or 
     alert(response.headers('Location')); 
});