آموزش گام به گام AngularJS قسمت ششم : AngularJS AJAX

بازدید کنندگان : 1587 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله قبل عملیات CRUD را روی یک آرایه اجرا کردیم در این مقاله قصد داریم همین عملیات را توسط Ajax بر روی بانک اطلاعاتی پیاده سازی نماییم .
برای این منظور یک جدول در پایگاه داده ایجاد کرده و اطلاعات ID , Firstname , Lastname را در آن ذخیره میکنیم ، سپس یک Restful API ایجاد کرده و از طریق $http متدها را فراخوانی میکنیم .
از آنجایی که این دوره مربوط به AngularJS است فرض میکنیم که Database و API موجود است بنابراین در این مقاله کار به $http را توضیح میدهم :
در مقاله قبل متغیر myData از طریق یک سری دیتا با فرمت JSON پر شده بود ، اکنون میخواهیم این اطلاعات را از API دریافت کنیم :
        $http({

            method: "GET",

            url: "/UserData/Get/"

        }).then(function mySucces(response) {

            $scope.myData = response.data;

        }, function myError(response) {

            alert('Error:' + respo.statusText);

        });


فرمت کلی استفاده از سرویس $http به صورت فوق میباشد که کاملا شبیه jQuery AJAX است ، این فرمت را میتوان به شکل زیر 
خلاصه کرد :
        $http.get("/UserData/Get/") 
        .then(function (response) { 
            $scope.myData = response.data; 

بنابراین توسط روش فوق متغیرmyData پر خواهد شد ، کافیست این روش را در متد های delete و update و add نیز به کار 
ببریم ، به عنوان مثال در متد Add داریم :
        $scope.add = function () {

 

            var newData = { name: $scope.name, family: $scope.family };

            $scope.myData.push(newData);

 

            $http({

                method: "Get",

                url: "/UserData/Creat/",

                params: newData

            }).then(function mySucces(response) {

                alert(response.data+ ' Data Was Added Succfully');

            }, function myError(response) {

                alert('Error:' + response.statusText);

            });

 

            $scope.name = '';

            $scope.family = '';

        }
دقت نمایید که در سرویس $http از پارامتر params جهت پاس دادن پارامترها استفاده شده است . 
در مورد update , delete نیز به همین شکل خواهد بود . 
دقت نمایید که به جای متد GET میتوان از متد POST نیز استفاده کرد  :
            $http({ 
                method: "POST", 
                url: "/UserData/Creat/", 
                data: newData 
            }).then(function mySucces(response) { 
                alert(response.data+ ' Data Was Added Succfully'); 
            }, function myError(response) { 
                alert('Error:' + response.statusText); 
            }); 
دقت نمایید تنها تفاوت در پارامتر method است که به POST تغییر کرده و پارامتر params به data تغییر کرده است . 
 
کد نهایی به شکل زیر است :
 

نظرات کاربران