Как я получаю данные с urlencoded формы POST с помощью $http?

Я новичок в AngularJS, и для начала я решил разработать новое приложение, используя только AngularJS.

Я пытаюсь сделать вызов AJAX на стороне сервера, используя $http из моего приложения Angular.

Для отправки параметров я попробовал следующее:

$http({
    method: "post",
    url: URL,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

Это работает, но он также использует jQuery в $.param. Для удаления зависимости от jQuery я попытался:

data: {username: $scope.userName, password: $scope.password}

но это, казалось, провалилось. Затем я попробовал params:

params: {username: $scope.userName, password: $scope.password}

но это также, казалось, терпит неудачу. Затем я попробовал JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

Я нашел эти возможные ответы на мои поиски, но не увенчался успехом. Я делаю что-то неправильно? Я уверен, что AngularJS предоставит эту функциональность, но как?

Ответы

Ответ 1

Я думаю, вам нужно сделать, это преобразовать ваши данные из объекта не в строку JSON, а в url params.

Из блога Ben Nadel.

По умолчанию служба $http преобразует исходящий запрос посредством сериализуя данные как JSON, а затем отправляя их с помощью контента, type, "application/json". Когда мы хотим опубликовать значение в качестве ФОРМЫ post, нам нужно изменить алгоритм сериализации и опубликовать данные с типом контента "application/x-www-form-urlencoded".

Пример отсюда.

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: {username: $scope.userName, password: $scope.password}
}).success(function () {});

Ответ 2

Переменные URL-кодирования, использующие только сервисы AngularJS

С помощью AngularJS 1.4 и выше две службы могут обрабатывать процесс кодирования данных URL для запросов POST, устраняя необходимость манипулировать данными с помощью transformRequest или используя внешние зависимости, такие как jQuery:

$httpParamSerializerJQLike - сериализатор, вдохновленный jQuery .param() (рекомендуется)
$httpParamSerializer - сериализатор, используемый Angular для запросов GET

Использование примера

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).success(function(response) { /* do something here */ });

См. более подробную демонстрацию Plunker

Как `$httpParamSerializerJQLike` и `$httpParamSerializer` разные

В общем, кажется, что $httpParamSerializer использует менее "традиционный" формат кодирования url, чем $httpParamSerializerJQLike, когда речь идет о сложных структурах данных.

Например (игнорирование процентного кодирования скобок):

& бык; Кодирование массива

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

& бык; Кодирование объекта

{address: {city: 'LA', country: 'USA'}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

Ответ 3

Все они выглядят как overkill (или не работают)... просто выполните это:

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {

Ответ 4

Проблема заключается в формате строки JSON. Вы можете использовать простую строку URL в данных:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

Ответ 5

Вот как это должно быть (и, пожалуйста, никаких бэкэнд-изменений... конечно, нет... если ваш передний стек не поддерживает application/x-www-form-urlencoded, а затем выбросьте его... надеюсь, что AngularJS делает!

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

Работает как шарм с AngularJS 1.5

Люди, дайте совет:

используйте promises .then(success, error) при работе с $http, забудьте о .sucess и .error обратных вызовах (поскольку они устарели)
Из сайта angularjs здесь "Вы больше не можете использовать строку JSON_CALLBACK в качестве заполнителя для указания, где значение параметра обратного вызова должен идти".

Если ваша модель данных более сложна, просто имя пользователя и пароль, вы все равно можете это сделать (как было предложено выше)

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

Документ для encodeURIComponent можно найти здесь

Ответ 6

Если это форма, попробуйте изменить заголовок на:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

и если это не форма и простой json, попробуйте этот заголовок:

headers[ "Content-type" ] = "application/json";

Ответ 7

вам нужно опубликовать простой объект javascript, ничего больше

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

если у вас есть php в качестве back-end, вам нужно будет сделать еще несколько изменений.. checkout эта ссылка для исправления php-сервера

Ответ 8

$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


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

Ответ 9

Из $http docs это должно работать.

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

Ответ 10

Это сработало для меня. Я использую angular для front-end и laravel php для back-end. В моем проекте веб-сайт angular отправляет данные json в конец laravel.

Это мой контроллер angular.

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

Это мой php back-end laravel controller.

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

Это моя маршрутная маршрутизация

Route::post('httpTest','[email protected]');

Результат в браузере

статус 200
данные JSON_CALLBACK ({ "имя пользователя": "Виктория", "пароль": "пароль", "обратный вызов": "JSON_CALLBACK" }); httpTesting.js: 18 функций заголовков (c) {a || (a = sc (b)); return р а [К (с)] || нуль: а}

Существует хромированное расширение, называемое почтальоном. Вы можете использовать для проверки своего внутреннего URL-адреса, работает ли он или нет. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

надеюсь, мой ответ поможет вам.

Ответ 11

Несмотря на поздний ответ, я нашел angular UrlSearchParams работал очень хорошо для меня, он также заботится о кодировании параметров.

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();