Tugas 7 - Pemrograman Web (N) - Implementasi Ajax jQuery

Tugas Pekan 7
Muhammd Farhan Arya Wicaksono (5054231011)

Link untuk Source Code :Link Soure code






Live Demo

You can view the pages here:
- Page click here : Ajax

Deskripsi

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

Popular posts from this blog

ETS - Dokumentasi Proyek Portal Berita

Tugas 8 - Crud Form Pendafaran

Tugas 6 - Pemrograman Web (N) - Form Registration, Dropdown, and Indonesia Postal Code