AngularJs $ http.post () не надсилає дані

Чи може хто-небудь сказати мені, чому наступне твердження не надсилає дані про публікацію у вказаний URL? URL-адреса викликається, але на сервері, коли я друкую $ _POST - я отримую порожній масив. Якщо я надрукую повідомлення в консолі перед тим, як додати його до даних - воно покаже правильний вміст.

$http.post('request-url',  { 'message' : message });

Я також спробував це з даними у вигляді рядка (з тим самим результатом):

$http.post('request-url',  "message=" + message);

Здається, це працює, коли я використовую його у такому форматі:

$http({
    method: 'POST',
    url: 'request-url',
    data: "message=" + message,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

але чи можна це зробити за допомогою $ http.post () - і чи завжди я повинен включати заголовок, щоб він працював? Я вважаю, що вищевказаний тип вмісту визначає формат надісланих даних, але чи можу я надіслати його як об’єкт JavaScript?

У мене була така ж проблема з використанням asp.net MVC і знайшов рішення тут

Серед новачків AngularJS існує велика плутанина щодо того, чому $httpфункції скорочень служб ( $http.post()тощо), схоже, не можуть бути замінені еквівалентами jQuery ( jQuery.post()тощо)

Різниця полягає в тому, як jQuery та AngularJS серіалізують та передають дані. По суті, проблема полягає у тому, що мова вашого сервера не в змозі зрозуміти передачу AngularJS споконвічно ... За замовчуванням jQuery передає дані за допомогою

Content-Type: x-www-form-urlencoded

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

AngularJS , однак, передає дані, використовуючи

Content-Type: application/json 

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

JSON-серіалізація, яка, на жаль, деякі мови веб-серверів - зокрема PHP - не створює несеріалізацію.

Працює як шарм.

КОД

// Your app's 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's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

Вище не надто ясно, але якщо ви отримуєте запит у PHP, ви можете використовувати:

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

Щоб отримати доступ до масиву в PHP від ​​AngularJS POST.

Ви можете встановити типовий "Тип вмісту" таким чином:

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

У мене виникла подібна проблема, і мені цікаво, чи це може бути корисно також: https://stackoverflow.com/a/11443066

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

З повагою,

Мені подобається використовувати функцію для перетворення об’єктів на розміщення парам.

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

Нарешті це було вирішено у кутовій 1.4, використовуючи $ httpParamSerializerJQLike

Дивіться https://github.com/angular/angular.js/isissue/6039

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

Я використовую jQuery param з запитом AngularJS postrestrest. Ось приклад ... створити модуль програми 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
    });
}]);

Мені не подобається пояснювати код, його досить просто зрозуміти :) Зауважте, що paramце jQuery, тому для його роботи потрібно встановити і jQuery, і AngularJS. Ось скріншот.

Сподіваюся, це корисно. Дякую!

У мене була така ж проблема з 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 спричинить деякі проблеми.

це спрацювало. Сподіваюся, це допомагає.

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

1. помістіть частину клієнтської частини js так:

   $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 не буде працювати!

Рішення працює для мене добре, сподіваюся, і для вас.

Щоб надсилати дані через methode Post з $httpangularjs, вам потрібно змінити

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

Щоб спиратися на відповідь @ felipe-miosso:

1. Завантажте його як модуль AngularJS звідси ,
2. Встановіть його

3. Додайте його до своєї програми:

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

У мене немає репутації коментувати, але у відповідь / доповнення до відповіді Дон Ф:

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

У функцію trueпотрібно додати другий параметр json_decode, щоб правильно повернути асоціативний масив:

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

Кутовий

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

Цей код вирішив проблему для мене. Це рішення на рівні додатків:

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

Додайте це у свій js-файл:

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

і додайте це у файл вашого сервера:

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

Це має спрацювати.

Я також зіткнувся з подібною проблемою, і я робив щось подібне, і це не працювало. Мій контролер 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 # post щодо того, що робить конфігурація парам. {data: '"id": "1"'} - Карта рядків або об'єктів, які будуть перетворені на URL? data = "id: 1"

це, мабуть, пізня відповідь, але я думаю, що найбільш правильним способом є використання того самого фрагмента кодового кутового використання під час виконання запиту "дістати", вам $httpParamSerializerдоведеться ввести його в свій контролер, щоб ви могли просто зробити наступне, не маючи необхідності взагалі використовувати Jquery, $http.post(url,$httpParamSerializer({param:val}))

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

У моєму випадку я вирішу проблему так:

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" :-)

Примітка: Мій "objJSON" - це об'єкт JSON, що містить вміст масивів, цілих чисел, рядків та html. Його загальний розмір становить> 3500 символів.

Я знаю, що прийняв відповідь. Але наступне може допомогти майбутнім читачам, якщо відповідь їх з будь-якої причини не влаштовує.

Кутовий не робить ajax таким же, як jQuery. Поки я намагався слідувати керівництву, щоб змінити кутовий $httpprovider, у мене виникли інші проблеми. Наприклад, я використовую кодигітайтер, у якому $this->input->is_ajax_request()функція завжди виходила з ладу (яку написав інший програміст і використовував глобально, тому не можу змінити), кажучи, що це не справжній запит ajax

Щоб вирішити це, я скористався відкладеною обіцянкою . Я тестував його в Firefox, і ie9, і він працював.

У мене є наступна функція, визначена поза будь-яким кутовим кодом. Ця функція робить регулярний jquery ajax виклик і повертає відкладений / обіцяний (я все ще вчу) об'єкт.

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

Тоді я називаю його кутовим кодом, використовуючи наступний код. Зверніть увагу, що ми повинні оновлювати $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 дзвінки з кутовим і дозволило мені оновити $scope.

У мене була така ж проблема в експресі .. щоб вирішити, вам потрібно використовувати bodyparser для розбору об'єктів json перед відправкою http-запитів ..

app.use(bodyParser.json());

Я використовую веб-сервіси asp.net WCF з кутовим 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;                    
       })

Сподіваюся, це допомагає.

Не знайшли повний фрагмент коду про те, як використовувати метод $ http.post для надсилання даних на сервер і чому він не працює в цьому випадку.

Пояснення фрагменту коду нижче ...

1. Я використовую функцію jQuery $ .param для серіалізації даних JSON до даних посту www

2. Встановлення типу Content-Type у змінній config, яка буде передана разом із запитом angularJS $ http.post, який вказує серверу, що ми надсилаємо дані у форматі www post.

3. Зверніть увагу на метод $ htttp.post, де я надсилаю 1-й параметр як URL, 2-й параметр як дані (серіалізований) і 3-й параметр як конфігурацію.

Залишився код зрозумілий для себе.

$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 тут .

Якщо ви використовуєте PHP, це простий спосіб отримати доступ до масиву в PHP через AngularJS POST.

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

Якщо ви використовуєте 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заголовком типу вмісту, як це зазвичай очікується при 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як значення.

Подібно до запропонованого робочим форматом ОП та відповіді Денісона, за винятком використання, $http.postа не просто $httpта все ще залежить від jQuery.

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

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

Коли у мене була ця проблема, параметр, який я розміщував, виявився масивом об'єктів замість простого об'єкта.

Щойно оновлений з 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) {
[...]

Я деякий час використовував код прийнятої відповіді (код Феліпе), і він чудово працює (спасибі, Феліпе!).

Однак нещодавно я виявив, що у нього є проблеми з порожніми об'єктами чи масивами. Наприклад, під час подання цього об’єкта:

{
    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's default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

Він менш ефективний, ніж код Феліпе, але я не думаю, що він має велике значення, оскільки він повинен бути негайним порівняно із загальними накладними витратами самого запиту HTTP.

Тепер PHP показує:

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

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

Також зауважте, що він перетворює невизначені s та null s у порожні рядки.

Просто поставте дані, які ви хочете надіслати як другий параметр:

$http.post('request-url',  message);

Ще одна форма, яка також працює:

$http.post('request-url',  { params: { paramName: value } });

Переконайтесь, що paramNameточно відповідає імені параметра функції, яку ви викликаєте.

Джерело: метод ярлика після публікації AngularJS

Я вирішив це за допомогою наведених нижче кодів:

Сторона клієнта (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);
        }
    }

Сподіваюся, це було корисно.