How make post req using JQuery Ajax AngularJs

Question

I am trying to make a post request code -

var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.data = {};
            $scope.reqCalling = function () {
                let settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": "myUrl",
                    "method": "POST",
                    "headers": {
                        "content-type": "application/json",
                    },
                    "data": JSON.stringify($scope.data),
                }
                $.ajax(settings).done(function (response) {
                    console.log("Success",response);
                    $scope.data = {};
                    $scope.$apply()
                    return false;
                }).fail(function (error) {
                    console.log("Failed",error);
                    // location.reload();
                });
            }
        });

Code of input one field

 <input type="email" class="form-control" maxlength="255" placeholder="Email..." ng-model="data.email" name="email">

I have created five fields just like above (firstname, lastname, email, phone, response) these are my input fields.

While making a request I am getting 502 status code.

When I made request from Postman it worked fine... My api is accepting JSON. from postman I passed the body as json

body passed from Postman-

{
        "firstname" : "firstname",
        "lastname" : "lastname",
        "phone" : "0000000000",
        "email" : "[email protected]",
        "response" : "Testing"
    }

I am new to AngularJs Ajax and JQuery I must have did some mistake in the code, Please help me with this.

Kinglish · Accepted Answer · 2021-06-16 07:15:23Z

1

I'm not sure about the 502 error, but on the off chance that this advice helps, why use jQuery with angular? Kind of defeats the purpose. They can be used together but there isn't really a point. They do things in completely different ways and angular has a solution for everything you might want JQ to do, like ajax calls for instance. Here is your same code, angularized (including injection protection if you ever decide to minimize your script)

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.data = {};
  $scope.reqCalling = function() {
    let settings = {
      "url": "myUrl",
      "method": "post",
      "headers": {
        "content-type": "application/json",
      },
      "data": $scope.data // you don't have to stringify the post vars
    }
    $http(settings).then(
      // success!
      function(response) {
        // success data: response.data
      },
      // error
      function(response) {
        if (!angular.isObject(response.data) ||
          !response.data.message) {
          // error: unknown error
        } else {
          // error : response.data.message
        }
      }

    )
  }
}]);

answered Jun 16, 2021 at 7:15

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chitrang Sharma Over a year ago

Thank you soo much for your help.. I have one doubt do I really not need to stringify post var ? second is I am using Ajax JQ with angularjs because in my company they just doing it like this idk but... that's why I tried the same.

Kinglish Over a year ago

Well, you might be able to stringify the post vars, but you don't need to and I never do. See this page: docs.angularjs.org/api/ng/service/$http

Chitrang Sharma Over a year ago

Thanks you soo much for your help

Collectives™ on Stack Overflow

How make post req using JQuery Ajax AngularJs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related