• Turkce TR
  • English En

    Jquery de Kullanıcı onayı ve Post işlemi

    Jquery de Kullanıcı onayı ve Post işlemi

    1. Yöntem: Standart Tarayıcı Onayı (En Basit)

    Ekstra bir kütüphane gerektirmez, ancak tasarımı değiştirilemez.

    jquery post

    $("#btnGonder").click(function() {
        // 1. Önce kullanıcıya sor
        if (confirm("Bu işlemi gerçekleştirmek istediğinize emin misiniz?")) {
            
            // 2. Kullanıcı 'Tamam' derse POST işlemi başlar
            $.post("/api/islemler", { id: 123, durum: "aktif" }, function(data) {
                alert("İşlem başarıyla tamamlandı!");
            })
            .fail(function() {
                alert("Bir hata oluştu.");
            });

        } else {
            // Kullanıcı 'İptal' derse hiçbir şey yapma
            console.log("İşlem iptal edildi.");
        }
    });

     

    2. Yöntem: SweetAlert2 (Modern ve Şık)

    Veli panelinde "Kredi Yükle" veya "Limit Koy" butonlarına basıldığında çok daha güven verici durur.

    Bunun için önce HTML sayfanın <head> kısmına şu linki eklemelisin: <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    Ardından jQuery kodun şu şekilde olmalı:

    $("#btnGonder").click(function() {
        
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Bakiyenizden düşüm yapılacaktır, onaylıyor musunuz?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6', // Mavi ton (Güven konseptine uygun)
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, Onayla!',
            cancelButtonText: 'Vazgeç'
        }).then((result) => {
            
            // Kullanıcı "Evet" butonuna bastıysa
            if (result.isConfirmed) {
                
                // POST işlemini burada yapıyoruz
                $.post("/api/bakiye-yukle", { tutar: 100, veliId: 5 }, function(response) {
                    
                    // Başarılı olursa ikinci bir güzel uyarı ver
                    Swal.fire(
                        'Başarılı!',
                        'İşlem gerçekleştirildi.',
                        'success'
                    );
                    
                }).fail(function() {
                    Swal.fire('Hata!', 'Sunucuya ulaşılamadı.', 'error');
                });
            }
        });
    });