0Pricing
jQuery Academy · Ders

AJAX Form Gönderimi ve Geri Bildirim

Daha akıcı bir kullanıcı deneyimi için form verilerini AJAX aracılığıyla eşzamansız göndermede, gerçek zamanlı kullanıcı geri bildirimi sağlamada ve sunucu yanıtlarını sayfayı tamamen yeniden yüklemeden ele almada ustalaşın.

AJAX Form Gönderimi ve Geri Bildirim, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

AJAX ile Akıcı Formlar

Tüm sayfa yeniden yüklenmeden bir form gönderdiğinizi düşünün! AJAX form gönderiminin sihri budur.

AJAX, sayfanın tamamını yenilemek yerine form verilerini arka planda bir sunucuya göndermenizi sağlar. Bu, yorumlar, kaydolma işlemleri veya hızlı güncellemeler için ideal olan çok daha akıcı ve hızlı bir kullanıcı deneyimi sunar.

Varsayılan Gönderimi Durdurma

AJAX form gönderiminin ilk adımı, tarayıcının varsayılan davranışını engellemektir. Bunu yapmazsanız sayfa her zamanki gibi yeniden yüklenir ve AJAX kullanmanın amacı ortadan kalkar!

Bunu, formumuzun gönderim işleyicisi içinde event.preventDefault() çağırarak gerçekleştiririz.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Form Verilerini Hazırlama

Form verilerini AJAX aracılığıyla göndermeden önce bunları doğru şekilde paketlememiz gerekir. jQuery'nin .serialize() yöntemi bunun için idealdir!

  • Form içindeki tüm input, select ve textarea öğelerinin değerlerini otomatik olarak toplar.
  • Bunları URL kodlamalı bir dizeye dönüştürür (örneğin name=Alice&email=alice%40example.com).
  • Bu dize, form verilerini sunucuya göndermek için kullanılan standart biçimdir.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

AJAX İsteği Gönderme

Form verileri serileştirildiğine göre artık bunları sunucuya gönderebiliriz. jQuery çeşitli AJAX yöntemleri sunar, ancak $.post() verileri HTTP POST yöntemiyle göndermek için kullanışlı bir kısayoldur.

Bu yöntem sunucu URL'sini, serileştirilmiş verileri ve başarı durumunda çalıştırılacak isteğe bağlı bir geri çağırma işlevini alır.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Yükleme Geri Bildirimi Görüntüleme

Kullanıcı gönder düğmesine tıkladığında anında yanıt bekler. AJAX istekleri eşzamanlı olmayan işlemler olduğundan bir gecikme yaşanır. Görsel geri bildirim sağlamak çok önemlidir!

İstek işlenirken 'Yükleniyor...' mesajı veya bir döndürücü gösterebilir, yanıt geldiğinde bunu gizleyebilirsiniz.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Başarılı Yanıtları İşleme

Sunucu form verilerini başarıyla işlediğinde genellikle bir yanıt gönderir. Bu yanıt bir onay mesajı, yeni oluşturulan bir kaydın ID'si veya güncellenmiş veriler olabilir.

$.post() içindeki üçüncü bağımsız değişken olan başarı geri çağırma işlevi bu verileri alır ve kullanıcı arayüzünüzü buna göre güncellemenizi sağlar.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Sorunsuz Hata İşleme

Tüm istekler başarılı olmaz. Ağ sorunları, sunucu hataları veya geçersiz veriler bir AJAX isteğinin başarısız olmasına neden olabilir. Bu hataları uygun biçimde işlemek ve kullanıcıyı bilgilendirmek çok önemlidir.

$.post() için bir .fail() yöntemi zincirleyebilirsiniz. $.ajax() için ise error geri çağırmasını veya döndürülen Deferred nesnesindeki .fail() yöntemini kullanabilirsiniz.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Gönderimden Sonra Formları Temizleme

Bir form başarıyla gönderildikten sonra girdi alanlarını temizlemek iyi bir kullanıcı deneyimi sağlar. Bu, yanlışlıkla yeniden gönderimleri önler ve sonraki işlem için temiz bir başlangıç sunar.

Form öğesinde yerel DOM .reset() yöntemini kullanabilir veya tek tek girdi değerlerini elle temizleyebilirsiniz.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Eksiksiz AJAX Form Örneği

Öğrendiğimiz tüm teknikleri birleştirelim: varsayılan gönderimi engelleme, verileri serileştirme, AJAX isteğini gönderme, yükleme geri bildirimi gösterme, hem başarılı hem de başarısız yanıtları işleme ve son olarak formu temizleme.

Bu kapsamlı yaklaşım, sağlam ve kullanıcı dostu bir AJAX form deneyimi sağlar.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Anlayışınızı Kontrol Edin

Formları AJAX ile göndererek gerçek zamanlı geri bildirim sağlamayı öğrendiniz. Bilginizi test edelim!

Özet: Akıcı Form Gönderimleri

Tebrikler! AJAX form gönderiminde ustalaşarak web uygulamalarınızı akıcı ve kesintisiz kullanıcı deneyimleriyle geliştirdiniz.

  • event.preventDefault() ile varsayılan form davranışını engellemeyi öğrendiniz.
  • Form verilerini iletim için kolayca hazırlamak üzere .serialize() kullandınız.
  • Verileri eşzamansız olarak göndermek için $.post() veya $.ajax() uyguladınız.
  • Yükleme, başarı ve hata durumları için gerekli gerçek zamanlı kullanıcı geri bildirimlerini eklediniz.
  • Son olarak, temiz bir kullanıcı arayüzü için gönderimden sonra formları temizlemeyi öğrendiniz.

Bu beceriler, modern ve duyarlı web formları oluşturmak için gereklidir!

Sıkça Sorulan Sorular

“AJAX Form Gönderimi ve Geri Bildirim” dersi ücretsiz mi?

Evet — “AJAX Form Gönderimi ve Geri Bildirim” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“AJAX Form Gönderimi ve Geri Bildirim” dersinde ne öğreneceğim?

Daha akıcı bir kullanıcı deneyimi için form verilerini AJAX aracılığıyla eşzamansız göndermede, gerçek zamanlı kullanıcı geri bildirimi sağlamada ve sunucu yanıtlarını sayfayı tamamen yeniden yükleme… jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“AJAX Form Gönderimi ve Geri Bildirim” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Dinamik Form Alanı Değiştirme
  2. İstemci Tarafı Form Doğrulama Mantığı
  3. AJAX Form Gönderimi ve Geri Bildirim
← jQuery Academy Sayfasına Dön