Tugas 7 - Pemrograman Web (N) - Implementasi Ajax jQuery
Tugas Pekan 7
Muhammd Farhan Arya Wicaksono (5054231011)
Live Demo
You can view the pages here:
Deskripsi
Implementasi form sederhana menggunakan jQuery AJAX untuk pengiriman data secara asynchronous.
Struktur file├── index.html (HTML, CSS, dan jQuery)└── README.mdFeatures- Form validasi client-side- Pengiriman data asynchronous dengan jQuery AJAX- Indikator loading- Feedback sukses/error- Penanganan FormData
1. HTML Form Structure dan jQuery CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<form id="ajaxForm"> <div class="form-group"> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" required> </div></form>
2. Event Listener dan Pengambilan Data
$(document).ready(function() { $('#ajaxForm').on('submit', function(e) { e.preventDefault(); const formData = new FormData(this); });});
3. Implementasi jQuery AJAX$.ajax({ url: 'https://jsonplaceholder.typicode.com/posts', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { // Handle success }, error: function(xhr, status, error) { // Handle error }, complete: function() { // Handle completion }});4. Penanganan Response success: function(response) { // Show success message $('#response') .removeClass('error') .addClass('success') .html('<strong>Sukses!</strong> Data berhasil dikirim.') .show();
5. Error Handlinng error: function(xhr, status, error) { // Show error message $('#response') .removeClass('success') .addClass('error') .html('<strong>Error!</strong> ' + error) .show(); console.error('Error:', error);
Notes- Menggunakan endpoint demo: `jsonplaceholder.typicode.com/posts`- Validasi form menggunakan HTML5 validation
Implementasi form sederhana menggunakan jQuery AJAX untuk pengiriman data secara asynchronous.
Struktur file
├── index.html (HTML, CSS, dan jQuery)
└── README.md
Features
- Form validasi client-side
- Pengiriman data asynchronous dengan jQuery AJAX
- Indikator loading
- Feedback sukses/error
- Penanganan FormData
1. HTML Form Structure dan jQuery CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<form id="ajaxForm">
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
</div>
</form>
2. Event Listener dan Pengambilan Data
$(document).ready(function() {
$('#ajaxForm').on('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
});
});
3. Implementasi jQuery AJAX
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// Handle success
},
error: function(xhr, status, error) {
// Handle error
},
complete: function() {
// Handle completion
}
});
4. Penanganan Response
success: function(response) {
// Show success message
$('#response')
.removeClass('error')
.addClass('success')
.html('<strong>Sukses!</strong> Data berhasil dikirim.')
.show();
5. Error Handlinng
error: function(xhr, status, error) {
// Show error message
$('#response')
.removeClass('success')
.addClass('error')
.html('<strong>Error!</strong> ' + error)
.show();
console.error('Error:', error);
Notes
- Menggunakan endpoint demo: `jsonplaceholder.typicode.com/posts`
- Validasi form menggunakan HTML5 validation
Comments
Post a Comment