jQuery İle $.post Fonksiyonu Sayesinde Ajax Post İşlemi

Bu yazımızda jQuery ile Ajax işlemlerini daha pratik yapabilmemizi sağlayan $.post fonksiyonu üzerine konuşacağız.jQuery 1.0 versiyonuna eklenmiş olan bu fonksiyon sayesinde daha hızlı ve kullanışlı bir biçimde Client tabanlı Server ilişkilerimizi kurabileceğiz.

İçeriğimizi Asp.NET MVC tabanlı bir örneklendirmeyle zenginleştireceğimizi bilmenizi isterim.

        //jQuery komutlarımızı barındıracak olan Index Action'ın .cshtml dosyasıdır.
        public ActionResult Index()
        {
            return View();
        }

        //Post neticesinde tetikleyeceğimiz örnek metodumuzdur.
        [HttpPost()]
        public ActionResult Post(string a, bool? b)
        {
            return Json("Post işlemi başarıyla gerçekleştirildi.", JsonRequestBehavior.AllowGet);
        }

Evet, şimdi $.post fonksiyonuna değinmeden evvel $.ajax fonksiyonunu hatırlayalım.

<input type="submit" value="Post Et" id="btnPost" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnPost").click(function () {
            $.ajax({
                url: '@Url.Action("Post","Home")',
                type: 'POST',
                dataType: 'json',
                data: { a: "örnek", b: true },
                success: function (gelenveri) {

                },
                error: function (hata) {

                }
            });
        });
    });
</script>

Yukarıdaki kod bloğunu incelerseniz eğer bildiğimiz $.ajax fonksiyonu aracılığıyla yapılan Ajax işlemini örneklendirmiş olduk.Bu yapı, günümüzün en önemli faktörü olan zaman kavramını bizim aleyhimize işlemekte ve bunun yanında dolaylı olarakta hız limitimizi sınırlamaktadır.($.ajax) fonksiyonunun gövdesinde “url”, “dataType” vs. gibi genel yapının kalıplarını oluşturma mecburiyeti $.post fonksiyonunda giderilmektedir.

Şimdi $.post fonksiyonunun prototipini ele alalım.

jQuery.post( url [, data ] [, success ] [, dataType ] )

$.post fonksiyonunun en büyük getirisi parametrik bir yapı olmasıdır.Yani post anında tetiklenecek adresin, verilecek parametre değerlerinin kalıplar aracılığıyla değil, fonksiyonun parametresi aracılığıyla direkt olarak verilebilmesidir.

Şimdi $.post fonksiyonunu kullanım varyasyonlarıyla beraber ele alalım.

<input type="submit" value="Post Et" id="btnPost" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnPost").click(function () {
            $.post("@Url.Action("POST","Home")", function (gelenveri) {
                alert(data);
            });
        });
    });
</script>

Yukarıdaki varyasyon en sade biçimiyle bir post işlemidir.İlgili adres tetiklenecektir ve geri dönülen sonuç gelenveri parametresinde tutulacaktır.Yani bu tipte, url kısmımız birinci parametre iken, success kısmı ikinci parametreye tekabül etmektedir.

<input type="submit" value="Post Et" id="btnPost" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnPost").click(function () {
            $.post("@Url.Action("POST","Home")", { a: "örnek", b: true }, function (gelenveri) {
                alert(gelenveri);
            });
        });
    });
</script>

Post neticesinde gönderilecek parametre değerlerinide 2. parametreden bu şekilde verebiliyoruz.

<input type="submit" value="Post Et" id="btnPost" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnPost").click(function () {
            $.post("@Url.Action("Post","Home")", function () {
                //Success
                alert("Gelen sonucu elde eder.");
            }).done(function () {
                alert("İkinci success olarak düşünebiliriz.");
            }).fail(function () {
                alert("Ajax işleminde bir hata alındıysa devreye girer.");
            }).always(function () {
                alert("Tüm ajax işlemi bittiğinde devreye girer.");
            });
        });
    });
</script>

Yukarıda gördüğünüz gibi “done”, “fail” ve “always” fonksiyon eklemleriyle Ajax sürecinde kontrol sağlayabiliyoruz.

Şimdi aşağıda seri bir şekilde birkaç örneklendirme yapalım.

Aşağıdaki kod sadece post işlemi yapmaktadır.

            $.post("@Url.Action("Post","Home")");

Aşağıdaki kod post işlemi yanında ilgili parametre değerlerini vermektedir.

            $.post("@Url.Action("Post", "Home")", { a: "Örnek", b: true });

Aşağıdaki kod post işlemi yanında success fonksiyonunu çalıştırmaktadır.

            $.post("@Url.Action("Post", "Home")", function (gelendeger) {
                alert("Gelen Değer : " + gelendeger);
            });

Aşağıdaki kod post işlemi yanında parametre değerlerini vermekte ve done fonksiyonu sayesinde de success fonksiyonu devreye sokmaktadır.

            $.post("@Url.Action("Post", "Home")", { a: "Örnek", b: true }).done(function (gelenDeger) {
                alert("Gelen Değer : " + gelenDeger);
            });

Aşağıdaki kod JSON bir veri oluşturup bu veriyi post etmekte ve done fonksiyonu ile success fonksiyonunu devreye sokmaktadır.

<script type="text/javascript">
    $(document).ready(function () {

        var Entity = {
            A: "Gençay",
            B: true
        };

        $("#btnPost").click(function () {
            $.post("@Url.Action("Post", "Home")", Entity).done(function (gelenDeger) {
                alert(gelenDeger.A + " " + gelenDeger.B);
            });
        });
    });
</script>

Bu yazımızında sonuna gelmiş bulunmaktayız.

Hepinize iyi çalışmalar dilerim.Sonraki yazımlarımda görüşmek üzere…