PHP Dinamik Ajax Formu Nasıl Yapılır?

Paylaşacağım kod bizzat projelerimde kullandığım bir koddur. Aşırı derecede basittir üstünde oynama yapmanız gerekmez direkt ekleyip kullanmaya başlayabilirsiniz.

Örnek üzerinde dönen uyarı mesajlarını lobibox ile kullanıcıya iletiyorum fakat siz lobibox kullanmak istemezseniz sevdiğin bir yapıyı kullanabilirsiniz swertalert, bootbox vb. gibi neden lobibox kullanıyorum diye sorarsanız da açıkcası hepsini tek tek deniyorum belli bir sebebi yok fakat kullanımı basit ve kolay.

Örneği Giriş Formu üzerinden göstereceğim.

HTML Form Kodu:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lobipanel/1.0.6/css/lobipanel.min.css" />

<form action="javascript:;">
    <div class="form-group">
        <label>Kullanıcı Adı</label>
        <input type="text" class="form-control" name="username" placeholder="Kullanıcı Adı">
    </div>
    <div class="form-group">
        <label>Şifre</label>
        <input type="password" class="form-control" name="password" placeholder="Şifre">
    </div>
    <button type="submit">Giriş Yap</button>
</form>

Formları hazırlarken action kısmına javascript:; olarak girmelisiniz method belirtmeniz önemli değil çünkü ajax kısmında zaten post üzerinden method belirtiyoruz. Yani form üzerinde belirtmeniz bir şeyi değiştirmeyecektir.

JQuery kullanıyorum bu sebeple kodu da JQuery üzerinden yazdım bu sebeple JQuery dahil etmeyi unutmayın.

HTML Ajax Kodu:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lobipanel/1.0.6/js/lobipanel.min.js"></script>
<script>
    $(document).ready(function(e) {
        $(document).on('submit','form',(function(){
            var data = new FormData(this);

            $.ajax({
                type: 'POST',
                data: data,
                contentType: false,
                processData: false,
                success: function (rtn_data){
                    var return_data = jQuery.parseJSON(rtn_data);

                    Lobibox.notify(return_data.type, {
                        sound: false,
                        continueDelayOnInactiveTab: false,
                        position: return_data.position,
                        icon: return_data.icon,
                        title:return_data.title,
                        delay:return_data.delay,
                        msg: return_data.message
                    });
                },
            });
        }));
    });
</script>

PHP Kodu:

if($_POST){

    $jsondata = [
        'title' => 'Uyarı Mesajı!',
        'message' => '',
        'size' => 'mini',
        'position' => 'top right',
        'type' => 'warning',
        'icon' => 'bx bx-menu',
        'delay' => 3000,
    ];

    if(!isset($_POST['username'])){
        $jsondata['message'] = "Kullanıcı Adını Girmedin!";
    }
    elseif(!isset($_POST['password'])){
        $jsondata['message'] = "Şifreni girmedin!";
    }
    else{
        $jsondata['type'] = "success";
        $jsondata['message'] = "İşlem Başarılı!";
    }

    echo json_encode($jsondata);
    exit;

}

İşlem bundan ibaret form üzerinde resim gönderebilirsiniz resim gönderirken esktra enctype belirtmenize gerek yok sadece input tipini file yapmanız yeterlidir.

Ajax onuda post edecektir fark etti iseniz kod üzerinde bir url belirtmedim varolduğu sayfaya post etmesi için ama siz diyelim ki belli bir. sayfa post etmesini istiyorsunuz o zaman ajax kodu içine bunu dahil edebilirsiniz.

Ajax Koduna Ekle:

url: $(this).attr('post-url')

Form’a Ekle:

post-url="ajax.php"

Konuyla ilgili sorularınız var ise yorum olarak belirtirseniz geri dönüş sağlarım.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir