10

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?

pirho
  • 11,565
  • 12
  • 43
  • 70
Rodmentou
  • 1,610
  • 3
  • 21
  • 39

5 Answers5

9

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.
  });
ggorlen
  • 44,755
  • 7
  • 76
  • 106
Wyetro
  • 8,439
  • 9
  • 46
  • 64
  • why are you injecting jQuery `$.ajax` into an angular question? angular has it's own ajax api – charlietfl Aug 24 '15 at 20:57
  • I included both for clarity – Wyetro Aug 24 '15 at 20:57
  • I don't think jquery should be used directly if AngularJS is in place, as that will force to use $scope.$apply and also will break the testability of angular (making Protractor stop waiting for the request to end) – Alfonso Presa Aug 24 '15 at 20:58
  • I modified it so that it is 100% Angular – Wyetro Aug 24 '15 at 20:59
  • 1
    Ok, I'm going with POST requests. I'm using Node with Express and I have already tried using POST requests to GET filtered data based on the req.body. Then, I'm using res.json(obj) to get data back on client. Thank you. I was just hoping to use the 'correct' word of method. – Rodmentou Aug 24 '15 at 21:01
  • Ok, glad to help. Please select this answer! – Wyetro Aug 24 '15 at 21:02
  • @RodrigoSouza, hit the check next to this answer – Wyetro Aug 24 '15 at 21:05
  • I was waiting for the cooldown. :P Checking right now. Thanks! – Rodmentou Aug 24 '15 at 21:06
3

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
2

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

ggorlen
  • 44,755
  • 7
  • 76
  • 106
chfumero
  • 1,137
  • 2
  • 13
  • 26
  • Thank you. But I don't want to use query params. :/ I'm going with POST. Thanks. – Rodmentou Aug 24 '15 at 21:05
  • Post is the rigth way to send data to the server, the get params is data that is append it to the url of the request. exp: url?query=helloworld&otherparam=23. It purpose is to refine the request options. Not send data to the server. – chfumero Aug 24 '15 at 21:08
1

Try

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

$http(req).then(function(){...}, function(){...});
Alfonso Presa
  • 1,024
  • 7
  • 11
0

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) { ...
Mahmoud Abdelsattar
  • 1,299
  • 1
  • 15
  • 31
Alexey Volkov
  • 1
  • 1