AngularJS mengirimkan data ke permintaan $ http.get

577

Saya memiliki fungsi yang melakukan permintaan http POST. Kode ditentukan di bawah ini. Ini berfungsi dengan baik.

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

Saya memiliki fungsi lain untuk http GET dan saya ingin mengirim data ke permintaan itu. Tapi saya tidak punya opsi itu di get.

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

Sintaksnya http.getadalah

dapatkan (url, konfigurasi)

Bocah Chubby
sumber

Jawaban:

942

Permintaan HTTP GET tidak dapat berisi data untuk diposkan ke server. Namun, Anda bisa menambahkan string kueri ke permintaan.

angular.http menyediakan opsi untuk itu disebut params.

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

Lihat: http://docs.angularjs.org/api/ng.$http#get dan https://docs.angularjs.org/api/ng/service/$http#usage ( paramstampilkan param)

fredrik
sumber
17
ini akan mengembalikan janji
Connor Leech
1
Kode dengan janji: $ http ({metode: 'GET', url: '/ someUrl'}). sukses (fungsi (data, status, tajuk, konfigurasi) {// panggilan balik ini akan dipanggil secara asinkron // ketika respons tersedia}). error (fungsi (data, status, header, config) {// dipanggil secara tidak sinkron jika terjadi kesalahan // atau server mengembalikan respons dengan status kesalahan.});
Ehud Grand
130
Angular juga menyediakan fungsionalitas dalam $http.get(url.details_path, {params: {user_id: user.id}}).
enpenax
15
Akan lebih baik untuk menjaga kunci objek konsisten antara kata kerja HTTP ... memiliki data untuk POST dan paret untuk GET adalah berlawanan dengan intuisi.
Hubert Perron
7
@ HubertPerron Sebenarnya itu tidak berlawanan karena ini adalah hal yang berbeda: DATA dapat mewakili objek / model, bahkan bersarang, dan menjadi bagian dari header POST ... PARAMS mewakili apa yang dapat Anda tambahkan ke URL GET, di mana setiap properti mewakili sebuah bagian dari querystring di url. Adalah baik bahwa mereka memiliki penamaan yang berbeda karena itu membuat Anda sadar akan fakta bahwa Anda melakukan sesuatu yang berbeda.
Jos
520

Anda dapat mengirimkan params secara langsung ke $http.get()Berikut ini berfungsi dengan baik

$http.get(user.details_path, {
    params: { user_id: user.id }
});
rampok
sumber
2
Ini berfungsi tetapi objek params sedang dikonversi menjadi String. Bagaimana cara mempertahankan objek asli?
wdphd
13
@ wdphd Ini melekat pada HTTP yang akan dikodekan ke string kueri
Uli Köhler
1
@Uli Köhler: Yup, ketinggalan ini. Saya berpikir sepanjang garis router UI di mana Anda dapat menentukan tipe data params. Memperbaiki ini dengan parseInt sederhana di backend.
wdphd
2
Ini adalah solusi yang tepat jika Anda ingin menambahkan parameter GET ke URL yang diberikan dan berfungsi dengan baik.
enpenax
43

Mulai dari AngularJS v1.4.8 , Anda dapat menggunakan get(url, config) sebagai berikut:

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) {
});
Arpit Aggarwal
sumber
1
Namun data ini masih belum ada di badan permintaan.
naXa
@naXa GET seharusnya url params hanya dengan konvensi, sehingga banyak kerangka kerja tidak akan memungkinkannya untuk menerapkan praktik terbaik, bahkan jika secara teknis itu bisa bekerja dan masuk akal.
Christophe Roussy
1
Andai saja dokumentasi AngularJS dapat memberikan contoh sederhana ini!
Norbert Norbertson
@ Agpwal Aggarwal apakah Anda akan baik hati melihat pertanyaan serupa saya dengan web server golang dan vue.js? stackoverflow.com/questions/61520048/...
user2315094
33

Solusi bagi mereka yang tertarik untuk mengirimkan params dan header dalam permintaan GET

$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
});

Contoh layanan lengkap akan terlihat seperti ini

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;
   }

});
Subodh Ghulaxe
sumber
Bagaimana data respons akan digunakan dalam pengontrol? Terima kasih.
Floris
3

Anda bahkan dapat menambahkan parameter ke bagian akhir url:

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

Dipasangkan dengan script.php:

<? var_dump($_GET); ?>

Menghasilkan peringatan javascript berikut:

array(1) {  
    ["param"]=>  
    string(4) "hello"
}
Jeffrey Roosendaal
sumber
2
apakah $ http ada yang lolos?
Michael Cole
2
Ini berfungsi juga tetapi masalah dengan ini adalah bahwa ketika Anda memiliki beberapa parameter itu menjadi menyakitkan menambahkannya ke akhir url plus jika Anda mengubah nama variabel Anda harus datang dan mengubahnya di url juga.
user3718908
Aku tahu. Itu lebih merupakan demonstrasi, menunjukkan bahwa Anda bahkan dapat melakukannya dengan cara biasa , saya tidak selalu merekomendasikannya. (Di mana 'cara biasa' berarti bagaimana Anda mungkin telah melakukannya selama bertahun-tahun dengan php)
Jeffrey Roosendaal
2

Berikut adalah contoh lengkap permintaan GET HTTP dengan parameter menggunakan angular.js di 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);
    }
}

MELIHAT:

<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>
Denys Wessels
sumber
IMHO Sintaks dengan paramslebih sedikit kesalahan cenderung daripada url concat 'manual'
Christophe Roussy
1

Untuk mengirim dapatkan permintaan dengan parameter yang saya gunakan

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

Dengan ini, Anda dapat menggunakan string url Anda sendiri

moin khan
sumber