CODEWITHSUNDEEP
angularjs
Rodmentou
Rodmentou

Reputation: 1640

How to do a $http GET with some data in AngularJS?

I want to make a Get request to my Backend, but I want to verify some user credentials before sending the response object.

Here is my code:

$scope.getEverything = function (){
    $http.get('http://localhost:1234/things').success(function(data){
        $scope.things = data;
    });
};

I've tried the same code with the following syntax:

$http.method('path).then
$http.method(config)

And I just could not figure out how to pass in some data. Trying to use params:data as the config object with print out:

GET http://localhost:1234/[object%20Object] 404 (Not Found)

On the console.

The AngularJS Docs don't say a word about sending data with GET requests. I've also tried some answers of Stack, but most of then are outdated and just won't work.

Can I send data with GET request or this is just one design error of my application?

Upvotes: 10

Views: 67822

Answers (5)

chfumero
chfumero

Reputation: 1147

If you want to pass some data when using the GET method you can pass a params option on the get method of the $http service. This will be urlencoded parameters.

$http.get(url, {
  params: {
    query: 'hello world'
  }
}

or

$http({
   url: url,
   method:'GET',
   params: {
     query:'Hello World'
   }
})

But, the http standards define the POST method to send data to the server. The GET is just to obtain data from it. In Angular the POST method looks like:

$http({
  url: url,
  method:'POST',
  data: {
    query: 'Hello World'
  }
})

Check the official docs for GET and POST

Upvotes: 2

Wyetro
Wyetro

Reputation: 8588

You're most likely going to need to use a POST method instead of a GET method.

But to do it with a GET method:

From AngularJS passing data to $http.get request:

A HTTP GET request can't contain data to be posted to the server. However you can add a query string to the request.

angular.http provides an option for it params.

$http({
     url: user.details_path, 
     method: "GET",
     params: {user_id: user.id}  
});

And using AngularJS to POST instead:

$http.post('/someUrl', {msg:'hello word!'}).
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Upvotes: 9

Alexey Volkov
Alexey Volkov

Reputation: 1

As @charlietfl mentioned, according to the docs you can do this to implement download loaded/total progress:

 $http.get(url,  {
     eventHandlers: {
         'progress': function(evt) {
             $window.console.log(evt.loaded + '/' + evt.total);
         }
     }
  }).then(function(response) { ...

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

For $http.get requests use the params property of the config object

$http.get(url, {params:{ foo:'bar'}}).then(func....

See the Arguments table in Usage section of $http docs

Upvotes: 3

Alfonso Presa
Alfonso Presa

Reputation: 1034

Try

var req = {
 method: 'GET',
 url: 'http://localhost:1234/things',
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

Upvotes: 1

Related Questions