Angularjs post does not send the data on server

Question

I'm trying to post data to server, But At server side, my model is null.

data is

{"email":"adas","password":"sds","grant_type":"password","client_id":"WebApp"}

 return $http.post(url, data,{headers: {'Content-Type': 'application/json'} })
            .then(function (result) {
                success(result);
            }, function (error) {
                debugger;
               //some code
            });

But when I send It using simple ajax request, I get my data on server side.

 var logininfo = { "email": "weee", "password": "password", "client_id": "IosApp", "grant_type": "password" };
        $.ajax({
            url: "http://localhost:53646/Login",                 
            type: "POST",
            data: logininfo,
            success: function (data) {
                debugger;
            }, error: function (daTA) {
                debugger;
            }
        }); 

And there is also one problem, as I have to send a custom header to server, so when I set that header in ajax request then again my data in null on server side.

var logininfo = { "email": "weee", "password": "password", "client_id": "IosApp", "grant_type": "password" };
        $.ajax({
            url: "http://localhost:53646/Login",
            headers: { 'ResourceAuthorization': 'Basic Qn12bGV34jEyMzQ1' },          
            type: "POST",
            data: logininfo,
            success: function (data) {
                debugger;
            }, error: function (daTA) {
                debugger;
            }
        });

This is how I'm trying to get the data

public void Configuration(IAppBuilder app)
        {
            app.Use(async (ctx, n) =>
            {
                if (ctx.Request.Path == new PathString("/Login"))
                {
                    var memstr = new StreamReader(ctx.Request.Body).ReadToEndAsync().Result; 
                    var loginmodel = JsonConvert.DeserializeObject<LoginModel>(memstr);   
                   //some code here                 
                }
                await n.Invoke();
            });
            ConfigureAuth(app);
        }

Answer 1

It is always better to use angular promises in your http request. it guaranties a result. It is also easy and useful to handle errors.

var userObject = = {
    email: "user@gmail.com",
    UserName: 'user123'
}

function LoginUser (userObj) {
  return $http.post('http://localhost:53646/Login', userObj,
       headers : {'ResourceAuthorization': 'Basic Qn12bGV34jEyMzQ1'}
  ).then(function (response) {
     console.log(response.data);
     return response.data;
  }, function (error) {
     console.log(error);
  });
};

And it is always better to create the http call as a service or function so that we can reuse that.

to run this http call

just call the function as

LoginUser(userObject);

Answer 2

see it working -

self.data = { "email": "adas", "password": "sds", "grant_type": "password", "client_id": "WebApp" };
self.getData = $http.post('../api/Controller/PostItem', JSON.stringify(self.data))
.then(function success(a, b) {
    //
}, function error(a, b) {
    //
});

Answer 3

sIt could be tricky, I always had to check the network transaction to be sure if it was really a POST, here my code example:

function postMEthod(ID) {
      var postURL = "your_url";

      var request = $http({
        method: 'POST',
        headers: {"Content-Type": 'text/plain; charset=UTF-8'},
        url: postURL,
        data: {
          dataParam: "value1",
          dataParam2: "value2"
        }
      });
      return ( request.then(handleSuccess, handleError) );
    }

I hope it helps.

Answer 4

Try this method.. this is working in my project.

var userData = {
            UserId: 1,
            UserName: 'Karan'
            }
var result = $http({
            url: "http://your_URL",
            dataType: 'json',
            method: 'POST',
            data: userData,
            headers: {
                "Content-Type": "application/json"
            }
        })
        result.success(function (data, status, headers, config) {
            //success
        });
        result.error(function (data, status, headers, config) {
            //Error
        });