Html Ajax Ile Veritabanına Veri Ekleme

HTML ve AJAX ile Veritabanına Veri Ekleme

Veritabanlarına veri eklemek, web uygulamalarının temel bir işlevidir. HTML ve AJAX kullanarak, kullanıcıların verileri veritabanına göndermelerine ve gerçek zamanlı geri bildirim almalarına olanak tanıyan dinamik web sayfaları oluşturabilirsiniz.

AJAX ile Veritabanına Veri Ekleme

AJAX (Asenkron JavaScript ve XML), web sayfalarının sunucuyla asenkron olarak iletişim kurmasına olanak tanıyan bir teknolojidir. Bu, kullanıcıların sayfayı yeniden yüklemek zorunda kalmadan verileri veritabanına gönderebilmelerini sağlar.

AJAX ile veri ekleme işlemi şu adımları içerir:

Form Oluşturma: Verileri toplayacak bir HTML formu oluşturun.
AJAX İşlevini Yazma: Form gönderildiğinde çalıştırılacak bir JavaScript AJAX işlevi yazın.
Sunucu Tarafı İşlemi: Sunucuda, verileri veritabanına eklemek için bir PHP veya ASP.NET gibi sunucu tarafı dilinde bir betik yazın.
AJAX Yanıtını İşleme: AJAX işlevi, sunucu tarafı betiğin yanıtını işler ve kullanıcıya geri bildirim sağlar.

HTML Formu Oluşturma

Verileri toplayacak bir HTML formu oluşturarak başlayın. Form, veritabanına eklenecek alanları içermelidir. Örneğin, bir kişi eklemek için aşağıdaki formu oluşturabilirsiniz:

“`html

“`

AJAX İşlevi Yazma

Form gönderildiğinde çalıştırılacak bir JavaScript AJAX işlevi yazın. İşlev, verileri toplayacak, sunucu tarafı betiğe bir AJAX isteği gönderecek ve yanıtını işleyecektir. Örneğin, aşağıdaki AJAX işlevi, yukarıdaki formdan verileri toplar ve “add_person.php” sunucu tarafı betiğine gönderir:

“`javascript
function addPerson() {
// Form verilerini topla
const name = document.getElementById(“name”).value;
const email = document.getElementById(“email”).value;

// AJAX isteği oluştur
const xhr = new XMLHttpRequest();
xhr.open(“POST”, “add_person.php”);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

// İsteği gönder
xhr.send(“name=” + name + “&email=” + email);

// Yanıtı işle
xhr.onload = function() {
if (xhr.status === 200) {
// Veriler başarıyla eklendi
alert(“Kişi başarıyla eklendi.”);
} else {
// Bir hata oluştu
alert(“Kişi eklenirken bir hata oluştu.”);
}
};
}
“`

Sunucu Tarafı İşlemi

Sunucuda, verileri veritabanına eklemek için bir PHP veya ASP.NET gibi sunucu tarafı dilinde bir betik yazın. Betik, AJAX isteğinden verileri almalı, veritabanına bağlanmalı ve verileri eklemelidir. Örneğin, aşağıdaki PHP betiği, “people” adlı bir veritabanı tablosuna verileri ekler:

“`php

query($sql);

// Bağlantıyı kapat
$conn->close();
?>

“`

AJAX Yanıtını İşleme

AJAX işlevi, sunucu tarafı betiğin yanıtını işler ve kullanıcıya geri bildirim sağlar. Yanıt, verilerin başarıyla eklendiğini veya bir hata oluştuğunu belirten bir mesaj içerebilir. Örneğin, yukarıdaki AJAX işlevi, yanıt durum kodunu kontrol eder ve kullanıcıya uygun bir mesaj görüntüler.