Как разместить данные с помощью Angular JS?

Question

Я пытаюсь передать данные POST в мое приложение, но это просто не работает. в PHP я попытался с CURL, и у меня нет никаких проблем.

В Угловом, корыте консоли я получаю:

Object { data: null, status: 0, headers: headersGetter/<(), config: Object, statusText: "" } 

С Curl, я могу размещать данные с помощью следующего кода:

# the POST data 
$email = 'test@test.fr'; 
$password = 'blabla'; 

$data = array("email" => "$email", "password" => "$password", "active" => TRUE); 
$data_string = json_encode($data); 

$ch = curl_init('http://localhost:8888/app/api/users/register'); 
# An HTTP POST request 
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); 
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json', 
    'Accept: application/json') 
); 
curl_setopt($ch, CURLOPT_TIMEOUT, 5); 
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5); 

//execute post 
$result = curl_exec($ch); 

//close connection 
curl_close($ch); 

echo $result; 

с угловым, этим код производит сообщение консоли в верхней части:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) { 

    $scope.data = {}; 

    $scope.newUser = function() { 

     $http({ 
     method: 'POST', 
     url: 'http://localhost:8888/app/api/users/register', 
     data: { 
      email:'test@test.fr', 
      password:'blabla' 
     }, 
     headers: { 
      'Content-Type': 'application/json; charset=utf-8' 
     } 
     }).then(function successCallback(response) { 
     console.log("GREAT"); 
     }, function errorCallback(response) { 
     console.log(response) 
     }); 

    } 

}]) 

Подробнее In образование:

С CURL/PHP пользователь создан и токен тоже.

string(199) "{ "success": true, "data": { "id": 18, "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjE4LCJleHAiOjE0NTI4NTIxODd9.vYU6YcuGS2rUUD2cBG233hSARWHp7dc1uBF7TdMrGeM" } }" 

Заголовок Направлено корыто Угловая:

Accept :"application/json, text/plain, */*" 
Content-Type :"application/json; charset=utf-8" 
X-Requested-With :"XMLHttpRequest" 

Кроме того, я follown этого учебника, чтобы создать CakePHP 3 API: http://www.bravo-kernel.com/2015/04/how-to-build-a-cakephp-3-rest-api-in-minutes/

EDIT, на Chrome:

OPTIONS http://localhost:8888/perles/app/users/register (anonymous function) @ ionic.bundle.js:23826sendReq @ ionic.bundle.js:23645serverRequest @ ionic.bundle.js:23357processQueue @ ionic.bundle.js:27879(anonymous function) @ ionic.bundle.js:27895Scope.$eval @ ionic.bundle.js:29158Scope.$digest @ ionic.bundle.js:28969Scope.$apply @ ionic.bundle.js:29263(anonymous function) @ ionic.bundle.js:62385eventHandler @ ionic.bundle.js:16583triggerMouseEvent @ ionic.bundle.js:2948tapClick @ ionic.bundle.js:2937tapMouseUp @ ionic.bundle.js:3013 
(index):1 XMLHttpRequest cannot load http://localhost:8888/app/api/users/register. Response for preflight has invalid HTTP status code 500 

Answer 1

Попробуйте следующее:

var config = { headers : {'Content-Type': 'application/json; charset=utf-8'}}; 
//Stringify the JSON data 
var data = JSON.stringify({email:'test@test.fr', password:'blabla', active: true}); 
$http.post(
     'http://localhost:8888/app/api/users/register', 
     data, 
     headers 
).then(function(response){ 
     // success callback 
    }).catch(function(error) { 

    }); 

Я предпочитаю разделять обратные вызовы успеха и отказа таким образом, что делает мой код более чистым.

Теперь вопрос CORS, кажется, ваш апи не позволяет, пожалуйста, убедитесь, что вы отправляете правильные заголовки управления доступом:

Access-Control-Allow-Origin: * 

Используйте предложение от одного из этих потоков, и я надеюсь, что ваша проблема должна быть Постановили:

• Restangular api calls to external getting 'No Access Allowed'
• How to enable CORS in AngularJs

Помните, что ваш сервер должен разрешать эти вызовы api, тогда только Угловая служба сможет получать данные от них.

Answer 2

Попробуйте использовать код, похожий на следующий:

$http.post("http://localhost:8888/app/api/users/register", {data: { 
     email:"test@test.fr", 
     password:"blabla" 
    } }).success(function(){ 
      alert("Success!"); 
     }); 

Я успешно использовал этот более «компактный» синтаксис, и он работал для меня всегда!

Бест,

Bruno

Answer 3

Ну, попробуйте этот режим сообщения в угловую его лучший способ сделать пост:

CONTROLLER:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) { 

     $scope.data = {name:'javier',age:12}; 

     $scope.newUser = function() { 
       var peticionjson = {}; 
       peticionjson['name'] = $scope.data.name; 
       peticionjson['age'] = $scope.data.age; 
       $http.post('http://localhost:8888/app/api/users/register', peticionjson) 
        .success(function (res) { 
         console.log(res); 
        }).error(function (error) { 
        }); 
      } 

}