AngularJs $http.post() не отправляет данные

Ответ 1

У меня была та же проблема, что и asp.net MVC и нашли решение здесь

Существует много путаницы среди новичков AngularJS относительно того, почему $http сокращенные функции обслуживания ($http.post() и т.д.) не отображаются подкачки с jQuery эквивалентами (jQuery.post() и т.д.)

Разница заключается в том, как jQuery и AngularJS сериализовать и передать данные. По сути, проблема заключается в том, что ваш серверный язык выбора не может понять передачу AngularJSs изначально... По умолчанию jQuery передает данные с помощью

Content-Type: x-www-form-urlencoded

и знакомой сериализации foo=bar&baz=moe.

AngularJS, однако, передает данные с использованием

Content-Type: application/json 

и { "foo": "bar", "baz": "moe" }

Сериализация JSON, к сожалению, некоторые языки веб-сервера - в частности  PHP - не инициализируйте изначально.

Работает как шарм.

КОД

// Your app root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

Ответ 2

Это не супер ясно выше, но если вы получаете запрос в PHP, вы можете использовать:

$params = json_decode(file_get_contents('php://input'),true);

Чтобы получить доступ к массиву в PHP из POST с помощью AngularJS.

Ответ 3

Вы можете установить "Тип содержимого" по умолчанию следующим образом:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

О формате data:

Методы $http.post и $http.put принимают любой объект JavaScript (или строку) в качестве параметра данных. Если данные являются объектами JavaScript, он по умолчанию будет преобразован в строку JSON.

Попробуйте использовать это изменение

function sendData($scope) {
    $http({
        url: 'request-url',
        method: "POST",
        data: { 'message' : message }
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

Ответ 4

У меня была аналогичная проблема, и мне интересно, может ли это также быть полезно: fooobar.com/questions/14277/...

var xsrf = $.param({fkey: "key"});
$http({
    method: 'POST',
    url: url,
    data: xsrf,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Привет,

Ответ 5

Мне нравится использовать функцию для преобразования объектов в post params.

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Ответ 6

Наконец, это было рассмотрено в angular 1.4, используя $httpParamSerializerJQLike

См. https://github.com/angular/angular.js/issues/6039

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"[email protected]",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

Ответ 7

Я использую параметр jQuery с сообщение AngularJS requrest. Вот пример... создайте модуль приложения AngularJS, где myapp определяется с помощью ng-app в вашем HTML-коде.

var app = angular.module('myapp', []);

Теперь создадим контроллер входа и POST-адрес электронной почты и пароль.

app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
    // default post header
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // send login data
    $http({
        method: 'POST',
        url: 'https://example.com/user/login',
        data: $.param({
            email: $scope.email,
            password: $scope.password
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        // handle success things
    }).error(function (data, status, headers, config) {
        // handle error things
    });
}]);

Мне не нравится exaplain кода, его достаточно просто понять:) Обратите внимание, что param - это jQuery, поэтому вы должны установить как jQuery, так и AngularJS, чтобы заставить его работать. Вот скриншот.

Надеюсь, это полезно. Спасибо!

Ответ 8

В отличие от JQuery и ради педантизма, Angular использует формат JSON для POST передача данных с клиента на сервер (JQuery применяет, вероятно, x-www-form-urlencoded, хотя JQuery и Angular используют JSON для ввода данных). Поэтому есть две части проблемы: в клиентской части js и в вашей части сервера. Поэтому вам нужно:

• добавить js Angular клиентскую часть следующим образом:

  $http({
  method: 'POST',
  url: 'request-url',
  data: {'message': 'Hello world'}
  });
  

И

2. пишите в своей части сервера для получения данных от клиента (если это php).

           $data               = file_get_contents("php://input");
           $dataJsonDecode     = json_decode($data);
           $message            = $dataJsonDecode->message;
           echo $message;     //'Hello world'
   

Примечание: $_POST не будет работать!

Решение работает для меня, надеюсь, и для вас.

Ответ 9

У меня была та же проблема с AngularJS и Node.js + Express 4 + Router

Маршрутизатор ожидает данные из почтового запроса в теле. Это тело всегда было пустым, если я следовал примеру из Angular Docs

Обозначение 1

$http.post('/someUrl', {msg:'hello word!'})

Но если я использовал его в данных

Обозначение 2

$http({
       withCredentials: false,
       method: 'post',
       url: yourUrl,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       data: postData
 });

Изменить 1:

В противном случае маршрутизатор Node.js будет ожидать данные в req.body, если используется нотация 1:

req.body.msg

который также отправляет информацию в виде полезной нагрузки JSON. Это лучше в некоторых случаях, когда у вас есть массивы в json и x-www-form-urlencoded, вы получите некоторые проблемы.

это сработало. Надеюсь, что это поможет.

Ответ 10

Чтобы отправить данные через почтовый метод с помощью $http угловых символов, вам нужно изменить

data: "message=" + message, с data: $.param({message:message})

Ответ 11

Чтобы построить на @felipe-miosso ответ:

• Загрузите его как модуль AngularJS из здесь,
• Установите его

• Добавьте его в ваше приложение:

  var app = angular.module('my_app', [ ... , 'httpPostFix']);
  

Ответ 12

Этот код решил проблему для меня. Это решение на уровне приложения:

moduleName.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.defaults.transformRequest.push(function(data) {
        var requestStr;
        if (data) {
            data = JSON.parse(data);
            for (var key in data) {
                if (requestStr) {
                    requestStr += "&" + key + "=" + data[key];
                } else {
                    requestStr = key + "=" + data[key];
                }
            }
        }
        return requestStr;
    });
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  }
]);

Ответ 13

У меня нет репутации, чтобы комментировать, но в ответ/дополнение к ответу "Дон Ф":

$params = json_decode(file_get_contents('php://input'));

Второй параметр true должен быть добавлен к функции json_decode для правильного возврата ассоциативного массива:

$params = json_decode(file_get_contents('php://input'), true);

Ответ 14

Angular

  var payload = $.param({ jobId: 2 });

                this.$http({
                    method: 'POST',
                    url: 'web/api/ResourceAction/processfile',
                    data: payload,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

WebAPI 2

public class AcceptJobParams
        {
            public int jobId { get; set; }
        }

        public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
        {
            // do something with fileName parameter

            return Ok();
        }

Ответ 15

Добавьте это в свой файл js:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

и добавьте это в файл вашего сервера:

$params = json_decode(file_get_contents('php://input'), true);

Это должно работать.

Ответ 16

это, вероятно, поздний ответ, но я думаю, что самый правильный способ - использовать тот же кусок кода angular, который используется при выполнении запроса "get" с помощью $httpParamSerializer, должен будет ввести его на ваш контроллер поэтому вы можете просто сделать следующее, не используя JQuery, $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
    $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

Ответ 17

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

Angular не делает ajax таким же, как jQuery. Хотя я пытался следовать руководству, чтобы изменить angular $httpprovider, я столкнулся с другими проблемами. Например. Я использую codeigniter, в котором функция $this->input->is_ajax_request() всегда терпит неудачу (которая была написана другим программистом и использовалась глобально, так что это не изменилось), заявив, что это не настоящий запрос ajax.

Чтобы решить эту проблему, я воспользовался отложенным обещанием. Я тестировал его в Firefox, и т.д., И он работал.

У меня есть следующая функция, определяемая вне любого из angular кода. Эта функция выполняет регулярный jQuery ajax-вызов и возвращает объект отложенного/обещающего (я все еще участвую).

function getjQueryAjax(url, obj){
    return $.ajax({
        type: 'post',
        url: url,
        cache: true,
        data: obj
    });
}

Затем я называю его angular кодом, используя следующий код. Обратите внимание, что мы должны обновить $scope вручную, используя $scope.$apply().

    var data = {
        media: "video",
        scope: "movies"
    };
    var rPromise = getjQueryAjax("myController/getMeTypes" , data);
    rPromise.success(function(response){
        console.log(response);
        $scope.$apply(function(){
            $scope.testData = JSON.parse(response);
            console.log($scope.testData);
        });
    }).error(function(){
        console.log("AJAX failed!");
    });

Это может быть не идеальный ответ, но он позволил мне использовать jQuery ajax-вызовы с помощью angular и разрешил мне обновлять $scope.

Ответ 18

У меня также возникла аналогичная проблема, и я делал что-то вроде этого, и это не сработало. Мой контроллер Spring не смог прочитать параметр данных.

var paramsVal={data:'"id":"1"'};
  $http.post("Request URL",  {params: paramsVal});  

Но, читая этот форум и API Doc, я пробовал следовать за ним, и это сработало для меня. Если у кого-то тоже есть аналогичная проблема, вы можете попробовать и ниже.

$http({
      method: 'POST',
      url: "Request URL",           
      params: paramsVal,
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
            });

Пожалуйста, проверьте https://docs.angularjs.org/api/ng/service/ $http # сообщение для того, что делает настройка параметров. {data: ' "id": "1" '} - Карта строк или объектов, которые будут перенаправлены на URL? data = "id: 1"

Ответ 19

Я использую webpervices asp.net WCF с angular js и ниже кода работал:

 $http({
        contentType: "application/json; charset=utf-8",//required
        method: "POST",
        url: '../../operation/Service.svc/user_forget',
        dataType: "json",//optional
        data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
        async: "isAsync"//optional

       }).success( function (response) {

         $scope.userforgeterror = response.d;                    
       })

Надеюсь, что это поможет.

Ответ 20

Не удалось найти полный фрагмент кода о том, как использовать метод $http.post для отправки данных на сервер и почему он не работал в этом случае.

Объяснения ниже фрагмента кода...

• Я использую функцию jQuery $.param для сериализации данных JSON для публикации данных www.

• Настройка Content-Type в переменной конфигурации, которая будет передана вместе с запросом angularJS $http.post, который сообщает серверу, что мы отправляем данные в формате www post.

• Обратите внимание на метод $htttp.post, где я отправляю 1-й параметр в качестве url, второй параметр в качестве данных (serialized) и третий параметр в качестве config.

Оставшийся код сам понятен.

$scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON 
            var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName
            });

            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post('/ServerRequest/PostDataResponse', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

Посмотрите пример кода $http.post здесь.

Ответ 21

При использовании Angular >= 1.4, здесь самое чистое решение, используя сериализатор, предоставленный Angular

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

И тогда вы можете просто сделать это в любом месте своего приложения:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

И он будет правильно сериализовать данные как param1=value1&param2=value2 и отправить его в /requesturl с заголовком application/x-www-form-urlencoded; charset=utf-8 Content-Type, как обычно ожидается с запросами POST на конечных точках.

TL; DR

Во время моих исследований я обнаружил, что ответ на эту проблему возникает во многих разных вариантах; некоторые из них очень запутаны и зависят от пользовательских функций, некоторые зависят от jQuery, а некоторые из них неполны, предполагая, что вам нужно только установить заголовок.

Если вы просто установите заголовок Content-Type, конечная точка увидит данные POST, но не будет в стандартном формате, потому что если вы не предоставите строку в качестве data или вручную сериализуете свой объект данных, все они будут последовательно сериализованы как JSON по умолчанию и могут быть неправильно интерпретированы в конечной точке.

например. если правильный правильный сериализатор не был установлен в приведенном выше примере, это будет видно в конечной точке как:

{"param1":"value1","param2":"value2"}

И это может привести к неожиданному анализу, например. ASP.NET рассматривает его как имя параметра null, с {"param1":"value1","param2":"value2"} как значение; или Fiddler интерпретирует его другим способом, с {"param1":"value1","param2":"value2"} в качестве имени параметра и null в качестве значения.

Ответ 22

Когда у меня была эта проблема, параметр, который я отправлял, оказался массивом объектов вместо простого объекта.

Ответ 23

У меня была такая же проблема в express. Чтобы решить, вам нужно использовать bodyparser для синтаксического анализа объектов json перед отправкой HTTP-запросов.

app.use(bodyParser.json());

Ответ 24

Только что обновленный с angular 1.2 до 1.3, нашел проблему в коде. Преобразование ресурса приведет к бесконечной петле, потому что (я думаю) из $обещания снова удерживает один и тот же объект. Может быть, это поможет кому-то...

Я мог бы исправить это:

[...]
  /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

angular.forEach(obj, function(value, name) {
+    if(name.indexOf("$promise") != -1) {
+        return;
+    }

    value = obj[name];
    if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
[...]

Ответ 25

Я использовал код ответа (код Felipe) некоторое время, и он отлично работает (спасибо, Фелипе!).

Однако недавно я обнаружил, что он имеет проблемы с пустыми объектами или массивами. Например, при отправке этого объекта:

{
    A: 1,
    B: {
        a: [ ],
    },
    C: [ ],
    D: "2"
}

PHP, похоже, вообще не видит B и C. Он получает следующее:

[
    "A" => "1",
    "B" => "2"
]

Взгляд на фактический запрос в Chrome показывает это:

A: 1
:
D: 2

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

Я использовал TypeScript, потому что мне нравится сильная печать, но было бы легко преобразовать в чистый JS:

angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

    function phpize(obj: Object | any[], depth: number = 1): string[] {
        var arr: string[] = [ ];
        angular.forEach(obj, (value: any, key: string) => {
            if (angular.isObject(value) || angular.isArray(value)) {
                var arrInner: string[] = phpize(value, depth + 1);
                var tmpKey: string;
                var encodedKey = encodeURIComponent(key);
                if (depth == 1) tmpKey = encodedKey;
                else tmpKey = `[${encodedKey}]`;
                if (arrInner.length == 0) {
                    arr.push(`${tmpKey}=`);
                }
                else {
                    arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
                }
            }
            else {
                var encodedKey = encodeURIComponent(key);
                var encodedValue;
                if (angular.isUndefined(value) || value === null) encodedValue = "";
                else encodedValue = encodeURIComponent(value);

                if (depth == 1) {
                    arr.push(`${encodedKey}=${encodedValue}`);
                }
                else {
                    arr.push(`[${encodedKey}]=${encodedValue}`);
                }
            }
        });
        return arr;
    }

    // Override $http service default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

Он менее эффективен, чем код Felipe, но я не думаю, что это имеет большое значение, поскольку оно должно быть немедленным по сравнению с общими накладными расходами самого HTTP-запроса.

Теперь PHP показывает:

[
    "A" => "1",
    "B" => [
        "a" => ""
    ],
    "C" => "",
    "D" => "2"
]

Насколько я знаю, невозможно заставить PHP распознавать, что Ba и C - пустые массивы, но, по крайней мере, появляются клавиши, что важно, когда код, который полагается на определенную структуру, даже когда он по существу пуст внутри.

Также обратите внимание, что он преобразует undefineds и nulls в пустые строки.

Ответ 26

Если вы используете PHP, это простой способ получить доступ к массиву на PHP с помощью AngularJS POST.

$params = json_decode(file_get_contents('php://input'),true);

Ответ 27

В моем случае я решаю проблему следующим образом:

var deferred = $q.defer();

$http({
    method: 'POST',
    url: 'myUri', 
    data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
    function(res) {
        console.log('succes !', res.data);
        deferred.resolve(res.data);
    },
    function(err) {
        console.log('error...', err);
        deferred.resolve(err);
    }
);
return deferred.promise;

Вам нужно использовать JSON.stringify для каждого параметра, содержащего объект JSON, а затем создать свой объект данных с помощью "$.param": -)

NB: Мой "objJSON" - это объект JSON, содержащий массив, целочисленный, строковый и html-контент. Его общий размер составляет > 3500 символов.

Ответ 28

Я решил это ниже:

Сторона клиента (Js):

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

обратите внимание, что данные являются объектами.

На сервере (ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }

и 'AllowCrossSiteJsonAttribute' необходим для запросов междоменных доменов:

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }

Надеюсь, это было полезно.

Ответ 29

Это не ошибка angular. angular предназначен для работы в мире JSON. Поэтому, когда служба $http отправляет запрос AJAX, он отправляет все ваши данные в качестве полезной нагрузки, а не как данные формы, чтобы ваше бэкэнд-приложение могло справиться с этим. Но jQuery делает некоторые вещи внутри себя. Вы инструктируете модуль jQuery $ajax для привязки данных формы как JSON, но перед отправкой запроса AJAX он сериализовал JSON и добавил заголовок application/x-www-form-urlencoded. Таким образом, ваше бэкэнд-приложение может получать данные формы в виде пост-параметров, а не JSON.

Но вы можете изменить поведение по умолчанию angular $http по умолчанию

• Добавление заголовка
• Сериализация json

$httpParamSerializerJQLike - это angular встроенный сервис, который сериализует json так же, как $.param делает jQuery.

$http({
    method: 'POST',
    url: 'request-url',
    data: $httpParamSerializerJQLike(json-form-data),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
    }
});

Если вам нужен плагин для сериализации форматированных данных в JSON, сначала используйте https://github.com/marioizquierdo/jquery.serializeJSON

Ответ 30

Как и в OP, предложенный рабочий формат и ответ Denison, за исключением использования $http.post вместо просто $http и все еще зависит от jQuery.

Хорошая вещь об использовании jQuery здесь заключается в том, что сложные объекты передаются должным образом; от ручного преобразования в параметры URL, которые могут исказить данные.

$http.post( 'request-url', jQuery.param( { 'message': message } ), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});