Merhabalar , Bu yazımda web sayfalarımızda JQuery Ajax ile Web API mize request isteği nasıl yapılır ve kullanılır örnek kodlar ile inceleyeceğiz.

Get ve Post işlemleri için bir örnek hazırlayacağız.

Örnekte kullanılacak Çalşanlar(employee) modeli :

Wep Api mizde çağıracağımız Controller Action Get ve Post kodları :

JQuery Ajax ile istek atacağımız cshtml örnek Web Projemizin kodları :

Ekran Görüntüsü : 

screenshot_3

Bu kodlarda dikkat etmemiz gereen kısım <script> etiketleri arasına yazılmış olan jquery ajax isteklerimiz.

Örnekte javascript olarak 2 adet function oluşturulmuş

LoadEmployees() bu func. ile sistemde kayıtı olan işçilerin bilgilerini web api ye GET methodu ile istek atıp employee listesini json formatında çekiyoruz ve sonrasında dönen listeyi for döngüsü ile dönüpü html listesi oluşturuyoruz ve ul etiketi içeriğine javascript append methodu ile ekliyoruz , sonuç olarak ekranımızda liste görüntülenmiş oluyor.

istek atılan web api controller ve action kod içeriği yazının üst tarafında bulunmaktadır.

CreateEmployee() bu func ile bir employee json datası oluşturup web api mize POST methodu ile gönderiyoruz ve web api miz gelen datayı db ye insert ediyor , sonrasında işlemler başarılı ise LoadEmpoyees func tekrar çalıştırılarak tam liste ekranda listeleniyor.

Ajax GET isteği incelemesi :

screenshot_1

Ekran Görüntüsünde $.ajax({});  ile ajax işlemimizi başlatıyoruz ve

1 numara method: GET ile istek (HttpRequest tipi) GET methodunu yapacağımızı bildiriyoruz.

2 numara url: istek yapacağımız wep api urli controller action v.s. url tam olarak bu kısma yazılmalı.

3 numara done ajax işlemimiz tamamlandığında , yani hata almadan sonuçlandığında yapılacak işlemleri  bu kod bloguna yazıyoruz , function (response) apiden dönen return ün yani listemizin içeriğini almış oluyoruz.

web api controller dan bize dönen response HttpResponseMessage ımızdaki value değerimizdir .

screenshot_6

4 numara alınan içeriği web sayfamızdaki yapıya göre html bir listesine dönüştürüp ul değişkenine yanıi #employees id sine sahip elemana append kodu ile ekliyoruz.

5 numara yapılan istek herhangi bir hata ile karşılaşır ise ajax ın fail methodu çalışacaktır , bu method içeriğinde bir alert mesajı ile ekrana Hata oluştu mesajı vereceğimizi kodluyoruz.

 

Ajax POST isteği incelemesi :

screenshot_2

 

1 numara web sayfaımızda id leri verilen alanların değerleri değişkenlere alıyoruz .

2 numara değişkenler ile emp adında bir json dosyası oluşturuyoruz ,

burada dikkat edilmesi gereken asıl konu json nesnemizdeki alan isimleri ile employe modelimizdeki isimlendirmelerin birebir aynı olması , büyük küçük harf fark etmez , aynı olmalı ki gönderdiğimiz veri POST metoduna gittiğinde eşleşip anlaşılır olmalı.

screenshot_4

3 numara $.ajax({});  ile ajax işlemimizi başlatıyoruz ve

method : POST istek yapacağımız Http Methodumuzu belirtiyoruz.

url : istek atacağımız wep api adresini yazıyoruz.

type: data gönderme işlemi yapıyoruz burada göndereceğimiz datanın tipini belirtiyoruz : emp değişkeni yani json

data : göndereceğimiz datayı ekliyoruz yani emp değişkeni.

 done ajax işlemimiz tamamlandığında , yani hata almadan sonuçlandığında yapılacak işlemleri  bu kod bloguna yazıyoruz , function (response) apiden dönen return’ün yani listemizin içeriğini almış oluyoruz.

screenshot_7

web api controller dan bize dönen

done(function (response, statusText, jqXHR) bu functionumuzda yazdığıız parametrelerin isimleri değil sırası önemlidir ajax ta 1. response , 2. status text , 3.jqXHR objesi

response HttpResponseMessage ımızdaki value değerimizdir .

statusText : succsess v.s. durumu mesajı döner.

jqXHR : Obje olarak döner ve içeriğinde genel bilgiler yer alır .

jqXHR  içerik ekran görüntüsü :

screenshot_8

4 numara Başarılı bir sonuç olmuşsa ve 201 yani Created ise web sayfamızdaki listemizi yenilemesi için LoadEmployees() func ımızı çalıştırıyoruz.

console.log(“location : ” + jqXHR.getResponseHeader(“location”)); kısmında tarayıcının log ekranına HttpResponseMessage ımızın header kısmına eklemiş olduğumuz location bilgisini yazdırıyoruz.

5 numara yapılan istek herhangi bir hata ile karşılaşır ise ajax ın fail methodu çalışacaktır , bu method içeriğinde bir alert mesajı ile ekrana Hata oluştu mesajı vereceğimizi kodluyoruz.

Örneğimiz ve kodlarımızı tamamladık ,

Kaynak : https://api.jquery.com/jquery.ajax/

Udemy : ASP.NET WEB API ile Yazılımcıların Bağımsızlığı Kursu

 

Print Friendly, PDF & Email
Bu alana reklam verebilirsiniz!