angulaire.js - Format de données pour le formulaire de soumission angulaire

Question

C'est ainsi que je soumets le formulaire

$http({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    url: url,
    data: {
        type: 1
    }
})

Pourquoi mon serveur reçoit-il quelque chose comme ça ?

{ '{"type":1}': '' }

Answer 1

Problème résolu
Raison :
Par défaut, jQuery transmet les données en utilisant Content-Type : x-www-form-urlencoded et la sérialisation familière foo=bar&baz=moe, cependant, transmet les données en utilisant Content-Type : application/json et { "foo": "bar. ", "baz": "moe" } Sérialisation JSON

Par défaut, jQuery transmet les données en utilisant Content-Type : x-www-form-urlencoded et une séquence similaire à "foo=bar&baz=moe", cependant AngularJS transmet les données en utilisant Content-Type : application/json et { " foo": "bar", "baz": "moe" } une telle séquence json.

Solution

.config(function($httpProvider) {
    $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function(data) {
        /**
         * The workhorse; converts an object to x-www-form-urlencoded serialization.
         * @param {Object} obj
         * @return {String}
         */
        var param = function(obj) {
            var query = '';
            var 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;
        };

        return angular.isObject(data) && String(data) !== '[object File]'
                ? param(data)
                : data;
    }];
})

Answer 2

Peut-être que vous êtes habitué à utiliser jquery,
jquery encapsule l'opération query_string
Ajoutez simplement ce code à angulaire et changez le nom de l'exemple

APP.config(['$httpProvider',function($httpProvider) {

            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
             // Override $http service's default transformRequest
            $httpProvider.defaults.transformRequest = [function(data) {
                /**
                 * The workhorse; converts an object to x-www-form-urlencoded serialization.
                 * @param {Object} obj
                 * @return {String}
                 */
                var param = function(obj) {
                    var query = '';
                    var 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;
                };

                return angular.isObject(data) && String(data) !== '[object File]'
                        ? param(data)
                        : data;
            }];


        }]);

Answer 3

1. Lisez la documentation officielle d'angularjs pour comprendre son utilisation. Il semble que l'en-tête de $http soit un peu différent.
2. Téléchargez l'outil Fiddler et affichez des informations telles que les en-têtes et les paramètres de requête.

Answer 4

Le serveur ne peut pas l'obtenir directement en utilisant $_REQUEST/$_POST, mais doit utiliser :
$params = json_decode(file_get_contents('php://input'),true);

Pour obtenir les données de soumission