PHP AJAX POST Kullanımı: Sayfa yenilemeden veri göndermek için adım adım rehber

04 Mayıs 2023 14 4 dk, 51 sn

Bu blog yazısında, PHP ve AJAX kullanarak sayfa yenilemeden veri göndermenin nasıl yapılabileceği konusunu ele alacağız.

Web uygulamalarında sıkça karşılaşılan bir sorun, sayfa yenileme işlemidir. Bir kullanıcı bir formu doldurduktan sonra, bu formu göndermek istediğinde sayfanın yenilenmesi gerekmekte ve bu da kullanıcı deneyimini olumsuz yönde etkilemektedir. Ancak, PHP ve AJAX kullanarak bu sorunu aşmak mümkündür.

AJAX, Asynchronous JavaScript and XML kısaltmasıdır ve web sayfalarının arka planda, sayfayı yenilemeden sunucu ile etkileşimde bulunabilmesini sağlayan bir teknolojidir. PHP ise, sunucu taraflı bir programlama dilidir ve web uygulamalarında sıklıkla kullanılmaktadır.

Öncelikle, HTML formu oluşturuyoruz ve bu formun verilerini AJAX ile PHP tarafına gönderiyoruz. Bunun için, jQuery kütüphanesi ile AJAX fonksiyonunu kullanacağız. AJAX fonksiyonu, verileri belirtilen URL'ye (PHP dosyası) asenkron olarak gönderir ve sonucu geri döndürür.

Formu oluşturduktan sonra, form verilerini göndermek için bir AJAX isteği göndermeniz gerekiyor.

AJAX isteği gönderirken, PHP tarafında verileri almak ve işlemek için bir POST yöntemi kullanmanız gerekiyor. Verileri işledikten sonra, sonuçları JSON formatında yanıt olarak göndermeniz gerekiyor.

Son olarak, AJAX isteği tarafından alınan yanıtı işleyerek, sayfayı yenilemeden sonuçları göstermelisiniz.

Bu adım adım rehberde, yukarıda bahsedilen adımları ayrıntılı olarak açıklayacağım ve örnek bir kod parçası sunacağım.

Ajax Form Post Örneği

Veri göndermek için kullanacağınız formu tarayıcıda görüntülemek için index.php adlı bir dosya oluşturun.

Şimdi sayfa için bir başlık tanımlayın.

<html>
<head>
<title>Ajax Post Form</title>
</head>
<body>
<h1>PHP jQuery Ajax post form</h1>

Ardından, kullanıcıdan ayrıntıları almak için bir HTML form oluşturun. Form, birkaç alan içerebilir, örneğin, ad, soyad, e-posta vb. Şu şekilde örnek bir form oluşturabilirsiniz:

<form id='userForm'>
<div><input type='text' name='name' placeholder='Adınız' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='text' name='number' placeholder='Telefon' /></div>
<div><input type='submit' value='Gönder' /></div>
</form>

Kullanıcı tarafından girilen bilgileri ve mesaj alındı bilgisini görüntülemek için bir Div oluşturun.

<div id='response'></div>

Şimdi, Jquery'yi kullanmak için Javascript kodunu sayfaya ekleyin.

<script class="lazyload img-fullwidth" src="https://cdn.webtrsite.com/images/empty.webp" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Aşağıdaki kodda, tüm mantık ve kod standardı tanımlanmıştır.

 <script>$(document).ready(function(){ $('#userForm').submit(function(){ // yükleniyor yazısı $('#response').html("<b>Gönderiliyor...</b>"); // Verileri almak için ajax başlatın $.ajax({ type: 'POST', url: 'kaydet.php', data: $(this).serialize() // formdaki değerleri alma }) .done(function(data){ // sonucu göster $('#response').html(data); }) .fail(function() { // başarısız olursa mesaj göster // formunuzu göndermenin başarısız olması durumunda alert( "Gönderim başarısız oldu." ); }); // tüm sayfanın yenilenmesini önlemek için return false; }); }); </script>

Jquery AJAX Post örneğinin tam kodu:

<html>
<head>
<title>Ajax Post Form</title>
</head>
<body>
<h1>PHP jQuery Ajax post form</h1>
<form id='userForm'>
<div> <input type='text' name='name' placeholder='Adınız' /> </div>
<div> <input type='text' name='email' placeholder='Email' /> </div>
<div> <input type='text' name='number' placeholder='Telefon' /> </div>
<div> <input type='submit' value='Gönder' /> </div>
</form>
<div id='response'></div>
<script class="lazyload img-fullwidth" src="https://cdn.webtrsite.com/images/empty.webp" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> $(document).ready(function(){ $('#userForm').submit(function(){ // yükleniyor yazısı $('#response').html("<b>Gönderiliyor...</b>"); // Verileri almak için ajax başlatın $.ajax({ type: 'POST', url: 'kaydet.php', data: $(this).serialize() // formdaki değerleri alma }) .done(function(data){ // sonucu göster $('#response').html(data); }) .fail(function() { // başarısız olursa mesaj göster // formunuzu göndermenin başarısız olması durumunda alert( "Gönderim başarısız oldu." ); }); // tüm sayfanın yenilenmesini önlemek için return false; }); }); </script>
</body>
</html>

Ve bitti!

Bir JQuery AJAX formu göndermek, gördüğünüz gibi oldukça kolay bir işlemdir.

Editör

Ogz

Reklam yada tanıtım amaçlı makaleleriniz için Reklam sayfası aracılığıyla bilgi alabilir ve her türlü görüş, öneri ve bildirimleriniz için mesaj gönderebilirsiniz.