Angularjs - Any Way for $Http.Post to Send Request Parameters Instead of JSON

AngularJS - Any way for $http.post to send request parameters instead of JSON?

I think the params config parameter won't work here since it adds the string to the url instead of the body but to add to what Infeligo suggested here is an example of the global override of a default transform (using jQuery param as an example to convert the data to param string).

Set up global transformRequest function:

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

That way all calls to $http.post will automatically transform the body to the same param format used by the jQuery $.post call.

Note you may also want to set the Content-Type header per call or globally like this:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

Sample non-global transformRequest per call:

    var transform = function(data){
        return $.param(data);
    }

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

AngularJS $http POST request with JSON parameter AND query string

It turns out we had an HTTP Interceptor function elsewhere in the codebase that was changing the content-type! Wrapped that in a conditional, and it is good to go now. Thanks to everyone who helped me ensure my code was written correctly!

Angularjs $http.post - sending params as JSON to ASPX webmethod

your issue seems to be as pointed by Emmanual Durai in first comment of your question: var request = "{'name':'" + "Nariman" + "'age':'" + 12 + "'}"; is not a valid json object.

request will give you {'name':'Nariman'age':'12'} as String which won't parse to JSON (there are issues with format).

You should try something like below to get a valid string

var request = {
    name: "Nariman",
    age: 12
}

var requestString = JSON.stringify(request)

also please have a look here How to pass json POST data to Web API method as object. your issue is not typically specific to angularjs $http but in general to XHR request.

AngularJS $http.post how to set the json data into request body

YOu can do it as follows
1. make a controller
2. make a add data to the call

syntax for the post call is as follows

$http.post(url, data, [config])

app.controller('controller', function ($scope, $http, $routeParams) {
        $http.post('url',data.call1($routeParams.id))
            .success(function (response) {
                 $scope.response = response;
            })
            .error(function (data, status, headers, config) {
            });
    });

var data = {
    call1:
        function (value) {
            return {'key': value, 'key': 'some text'};
         }
}

Send two objects with $http.post in AngularJS while uploading a file with some data

Try this.

var fd = new FormData();
for (var i = 0; i < file.length; i++) {
    fd.append("file", file[i]);
}

for (var key in $scope.Employee) {
        fd.append(key, $scope.Employee[key]);
        alert($scope.Employee[key]);
    }

$http.post('Employees/', fd, {
        headers: { 'Content-Type': undefined }
    }).success(function (data) {
        $scope.AddEditEmployee = false;
        getEmployees();
    }).error(function (data, status, headers, config) {
    });

From backend you need to remove object as parameter and find that from form of request.

    public void Post(){ 
EmployeeBo obj = new EmployeeBo();
obj.key= HttpContext.Current.Request.Form["Key"];

.........
 }

Angularjs $resource POST send query string not JSON object (Typescript)

Take a look at $resource.

Your problem is, that you pass the data as second parameter. To pass the data as a JSON object you must do the following:

$resource("http://localhost:8085/api/entity/:entityId", 
     {},  
     {params: {id: '@id'}...}
);

AngularJs $http.post() does not send data

I had the same problem using asp.net MVC and found the solution here

There is much confusion among newcomers to AngularJS as to why the
$http service shorthand functions ($http.post(), etc.) don’t appear to
be swappable with the jQuery equivalents (jQuery.post(), etc.)

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using

Content-Type: x-www-form-urlencoded

and the familiar foo=bar&baz=moe serialization.

AngularJS, however, transmits data using

Content-Type: application/json 

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

JSON serialization, which unfortunately some Web server languages—notably
PHP—do not unserialize natively.

Works like a charm.

CODE

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

---

Related Topics