ChatGPT解决这个技术问题 Extra ChatGPT

AngularJS passing data to $http.get request

I have a function which does a http POST request. The code is specified below. This works fine.

 $http({
   url: user.update_path, 
   method: "POST",
   data: {user_id: user.id, draft: true}
 });

I have another function for http GET and I want to send data to that request. But I don't have that option in get.

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

The syntax for http.get is

get(url, config)


R
Ricky Dam

An 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 called params.

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

See: http://docs.angularjs.org/api/ng.$http#get and https://docs.angularjs.org/api/ng/service/$http#usage (shows the params param)


this will return a promise
The code with the promise: $http({method: 'GET', url: '/someUrl'}). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
Angular also provides the functionality in the $http.get(url.details_path, {params: {user_id: user.id}}).
It would have been nice to keep the object key consistent between HTTP verbs... having data for POST and params for GET is counterintuitive.
@HubertPerron Actually it is not counterintuitive since these are different things: DATA can represent an object/model, even nested, and becomes part of the POST header... PARAMS represent what you can add to the GET url, where each property represents a part of the querystring in the url. It's good that they have different naming because it makes you aware of the fact that you are doing something different.
R
Rob

You can pass params directly to $http.get() The following works fine

$http.get(user.details_path, {
    params: { user_id: user.id }
});

This works but the params object is being converted into String. How do i retain the original object?
@wdphd It is inherent to HTTP that it wll be encoded to a query string
@Uli Köhler: Yup, Missed this. I was thinking along the lines of UI router where you can specify the params data type. Fixed this with a simple parseInt on the backend.
This is the correct solution if you want to add GET parameters to the given URL and works perfectly fine.
A
Arpit Aggarwal

Starting from AngularJS v1.4.8, you can use get(url, config) as follows:

var data = {
 user_id:user.id
};

var config = {
 params: data,
 headers : {'Accept' : 'application/json'}
};

$http.get(user.details_path, config).then(function(response) {
   // process response here..
 }, function(response) {
});

But this data still isn't in a request body.
@naXa GET should be url params only by convention, so many frameworks will not allow it to enforce best practice, even if technically it could work and could make sense.
If only the AngularJS documentation could have provided this simple example!
@Arpit Aggarwal would you be so kind in having a look at my similar question with golang web server and vue.js? stackoverflow.com/questions/61520048/…
S
Subodh Ghulaxe

Solution for those who are interested in sending params and headers in GET request

$http.get('https://www.your-website.com/api/users.json', {
        params:  {page: 1, limit: 100, sort: 'name', direction: 'desc'},
        headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
    }
)
.then(function(response) {
    // Request completed successfully
}, function(x) {
    // Request error
});

Complete service example will look like this

var mainApp = angular.module("mainApp", []);

mainApp.service('UserService', function($http, $q){

   this.getUsers = function(page = 1, limit = 100, sort = 'id', direction = 'desc') {

        var dfrd = $q.defer();
        $http.get('https://www.your-website.com/api/users.json', 
            {
                params:{page: page, limit: limit, sort: sort, direction: direction},
                headers: {Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
            }
        )
        .then(function(response) {
            if ( response.data.success == true ) { 

            } else {

            }
        }, function(x) {

            dfrd.reject(true);
        });
        return dfrd.promise;
   }

});

How would the response data be used in a controller? Thanks.
J
Jeffrey Roosendaal

You can even simply add the parameters to the end of the url:

$http.get('path/to/script.php?param=hello').success(function(data) {
    alert(data);
});

Paired with script.php:

<? var_dump($_GET); ?>

Resulting in the following javascript alert:

array(1) {  
    ["param"]=>  
    string(4) "hello"
}

does $http do any escaping?
This works too but the issue with this is that when you have multiple parameters it becomes a pain adding them to the end of the url plus if you change a variable name you have to come and change it in the url as well.
I know. It was more a demonstration, showing that you can even do it the regular way, I don't necessarily recommend it. (Where 'regular way' means how you've probably done it for years with php)
D
Denys Wessels

Here's a complete example of an HTTP GET request with parameters using angular.js in ASP.NET MVC:

CONTROLLER:

public class AngularController : Controller
{
    public JsonResult GetFullName(string name, string surname)
    {
        System.Diagnostics.Debugger.Break();
        return Json(new { fullName = String.Format("{0} {1}",name,surname) }, JsonRequestBehavior.AllowGet);
    }
}

VIEW:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module("app", []);

    myApp.controller('controller', function ($scope, $http) {

        $scope.GetFullName = function (employee) {

            //The url is as follows - ControllerName/ActionName?name=nameValue&surname=surnameValue

            $http.get("/Angular/GetFullName?name=" + $scope.name + "&surname=" + $scope.surname).
            success(function (data, status, headers, config) {
                alert('Your full name is - ' + data.fullName);
            }).
            error(function (data, status, headers, config) {
                alert("An error occurred during the AJAX request");
            });

        }
    });

</script>

<div ng-app="app" ng-controller="controller">

    <input type="text" ng-model="name" />
    <input type="text" ng-model="surname" />
    <input type="button" ng-click="GetFullName()" value="Get Full Name" />
</div>

IMHO The syntax with params is less error prone than a 'manual' url concat
M
Mohib

For sending get request with parameter i use

  $http.get('urlPartOne\\'+parameter+'\\urlPartTwo')

By this you can use your own url string