Pengiriman dan Umpan Balik Formulir AJAX
Kuasai pengiriman data formulir secara asinkron melalui AJAX, berikan umpan balik waktu nyata kepada pengguna, dan tangani respons server tanpa memuat ulang seluruh halaman untuk pengalaman pengguna yang lebih lancar.
Pengiriman dan Umpan Balik Formulir AJAX adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.
Formulir Lancar dengan AJAX
Bayangkan mengirim formulir tanpa memuat ulang seluruh halaman! Itulah kehebatan pengiriman formulir dengan AJAX.
Alih-alih memuat ulang seluruh halaman, AJAX memungkinkan Anda mengirim data formulir ke server di latar belakang. Hal ini memberikan pengalaman pengguna yang jauh lebih lancar dan cepat, cocok untuk komentar, pendaftaran, atau pembaruan singkat.
Menghentikan Pengiriman Bawaan
Langkah pertama dalam pengiriman formulir dengan AJAX adalah mencegah perilaku bawaan browser. Jika tidak, halaman akan dimuat ulang seperti biasa dan tujuan penggunaan AJAX menjadi sia-sia!
Kita melakukannya dengan memanggil event.preventDefault() di dalam penanganan submit formulir.
<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>Menyiapkan Data Formulir
Sebelum mengirim data formulir melalui AJAX, kita perlu mengemasnya dengan benar. Metode .serialize() milik jQuery sangat cocok untuk keperluan ini!
- Metode ini secara otomatis mengumpulkan nilai dari semua elemen input, select, dan textarea di dalam formulir.
- Nilai-nilai tersebut dikodekan menjadi string yang dikodekan untuk URL (misalnya,
name=Alice&email=alice%40example.com). - String ini merupakan format standar untuk mengirim data formulir ke server.
<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>Mengirim Permintaan AJAX
Setelah data formulir diserialisasi, kita dapat mengirimkannya ke server. jQuery menyediakan beberapa metode AJAX, tetapi $.post() adalah cara singkat yang praktis untuk mengirim data menggunakan metode HTTP POST.
Metode ini menerima URL server, data yang telah diserialisasi, dan fungsi callback opsional yang dijalankan saat berhasil.
<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>Menampilkan Umpan Balik Pemuatan
Ketika pengguna mengeklik submit, mereka mengharapkan respons langsung. Karena permintaan AJAX berjalan secara asinkron, terdapat jeda. Memberikan umpan balik visual sangatlah penting!
Anda dapat menampilkan pesan 'Loading...' atau indikator pemuatan saat permintaan sedang diproses, lalu menyembunyikannya setelah respons diterima.
<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>Menangani Respons Berhasil
Setelah server berhasil memproses data formulir, server biasanya mengirimkan respons. Respons ini dapat berupa pesan konfirmasi, ID rekaman yang baru dibuat, atau data yang diperbarui.
Fungsi callback success (argumen ketiga dalam $.post()) menerima data tersebut, sehingga Anda dapat memperbarui UI sesuai kebutuhan.
<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>Penanganan Error yang Baik
Tidak semua permintaan berhasil. Masalah jaringan, error server, atau data yang tidak valid dapat menyebabkan permintaan AJAX gagal. Sangat penting untuk menangani error ini dengan baik dan memberi tahu pengguna.
Untuk $.post(), Anda dapat merangkai metode .fail(). Untuk $.ajax(), Anda dapat menggunakan callback error atau metode .fail() pada objek Deferred yang dikembalikan.
<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>Mengosongkan Formulir Setelah Pengiriman
Setelah formulir berhasil dikirim, mengosongkan kolom input merupakan pengalaman pengguna yang baik. Hal ini mencegah pengiriman ulang secara tidak sengaja dan menyediakan kondisi bersih untuk tindakan berikutnya.
Anda dapat menggunakan metode .reset() bawaan DOM pada elemen formulir, atau mengosongkan nilai setiap input secara manual.
<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>Contoh Formulir AJAX Lengkap
Mari gabungkan semua teknik yang telah kita pelajari: mencegah pengiriman bawaan, menserialisasi data, mengirim permintaan AJAX, menampilkan umpan balik pemuatan, menangani respons berhasil dan gagal, lalu mengosongkan formulir.
Pendekatan menyeluruh ini memastikan pengalaman menggunakan formulir AJAX yang kuat dan mudah digunakan.
<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>Periksa Pemahaman Anda
Anda telah mempelajari cara mengirim formulir dengan AJAX sambil memberikan umpan balik secara real-time. Mari uji pengetahuan Anda!
Ringkasan: Pengiriman Formulir yang Lancar
Selamat! Anda telah menguasai pengiriman formulir dengan AJAX dan meningkatkan aplikasi web dengan pengalaman pengguna yang lancar serta tidak mengganggu.
- Anda mempelajari cara mencegah perilaku bawaan formulir dengan
event.preventDefault(). - Anda menggunakan
.serialize()untuk menyiapkan data formulir dengan mudah sebelum dikirim. - Anda menerapkan
$.post()atau$.ajax()untuk mengirim data secara asinkron. - Anda menambahkan umpan balik pengguna secara real-time yang penting untuk status pemuatan, keberhasilan, dan error.
- Terakhir, Anda mempelajari cara mengosongkan formulir setelah pengiriman agar antarmuka pengguna tetap bersih.
Keterampilan ini penting untuk membangun formulir web modern yang responsif!
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengiriman dan Umpan Balik Formulir AJAX” gratis?
Ya — teks lengkap “Pengiriman dan Umpan Balik Formulir AJAX” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Pengiriman dan Umpan Balik Formulir AJAX”?
Kuasai pengiriman data formulir secara asinkron melalui AJAX, berikan umpan balik waktu nyata kepada pengguna, dan tangani respons server tanpa memuat ulang seluruh halaman untuk pengalaman pengguna… Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Pengiriman dan Umpan Balik Formulir AJAX” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Manipulasi Bidang Formulir Dinamis
- Logika Validasi Formulir Sisi Klien
- Pengiriman dan Umpan Balik Formulir AJAX