AJAX and Effects

$.ajax({
    url: '/api/users',
    method: 'GET',
    dataType: 'json',
    timeout: 5000,
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Custom', 'value');
    },
    success: function(data, textStatus, xhr) {
        console.log('Success:', data);
        console.log('Status:', xhr.status);
    },
    error: function(xhr, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
    },
    complete: function() {
        // Runs on both success and error
        hideLoadingSpinner();
    }
});

// GET
$.get('/api/users', function(data) {
    console.log(data);
});

// GET with params
$.get('/api/search', { q: 'flutter', page: 1 }, function(data) {
    displayResults(data);
});

// POST with JSON
$.post('/api/users', { name: 'Alice', email: 'alice@test.com' }, function(data) {
    console.log('Created:', data);
});

// Load HTML fragment into element
$('#content').load('/page.html #main-content');

// Get JSON
$.getJSON('/api/data.json', function(data) {
    renderChart(data);
});

$.ajax({
    url: '/api/users',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'Alice', email: 'alice@test.com' }),
    dataType: 'json',
    success: function(data) { console.log(data); }
});

// Run before every AJAX request
$(document).ajaxStart(function() {
    $('#loading').show();
});

$(document).ajaxStop(function() {
    $('#loading').hide();
});

// Set global defaults
$.ajaxSetup({
    timeout: 10000,
    headers: { 'X-CSRF-Token': $('meta[name="csrf"]').attr('content') }
});

// Show/Hide
$('p').show();                    // Show
$('p').show(300);                 // Show with 300ms animation
$('p').hide();                    // Hide
$('p').hide(200);                 // Hide with animation
$('p').toggle();                  // Toggle visibility

// Fade
$('p').fadeIn(300);
$('p').fadeOut(200);
$('p').fadeToggle(300);
$('p').fadeTo(300, 0.5);         // Fade to 50% opacity

// Slide
$('p').slideDown(300);
$('p').slideUp(200);
$('p').slideToggle(300);

// Animate CSS properties
$('.box').animate({
    width: '200px',
    height: '200px',
    opacity: 0.8,
    marginLeft: '50px'
}, 500, 'swing', function() {
    console.log('Animation complete!');
});

// Relative values (prefix with += or -=)
$('.box').animate({
    left: '+=50',        // Move right 50px
    opacity: '-=0.1'     // Decrease opacity by 0.1
}, 300);

// Stop current animation
$('.box').stop();         // Stop current animation
$('.box').stop(true);     // Stop and clear queue
$('.box').stop(true, true);  // Stop, clear, and jump to end

$('.box')
    .fadeOut(200)
    .queue(function(next) {
        $(this).text('Updated!').css('color', 'red');
        next();
    })
    .fadeIn(200);

// Load data via AJAX and build a table
function loadUsers(page) {
    $.getJSON('/api/users', { page: page }, function(data) {
        var html = '<table><thead><tr><th>Name</th><th>Email</th><th></th></tr></thead><tbody>';
        
        data.users.forEach(function(user) {
            html += '<tr data-id="' + user.id + '">' +
                '<td>' + user.name + '</td>' +
                '<td>' + user.email + '</td>' +
                '<td><button class="delete-btn">Delete</button></td>' +
                '</tr>';
        });
        
        html += '</tbody></table>';
        
        $('#table-container')
            .html(html)
            .find('tr')
            .hide()
            .each(function(i) {
                $(this).delay(i * 50).fadeIn(200);
            });
    });
}

// Delete with AJAX
$('#table-container').on('click', '.delete-btn', function() {
    var $row = $(this).closest('tr');
    var id = $row.data('id');
    
    $.ajax({
        url: '/api/users/' + id,
        method: 'DELETE',
        success: function() {
            $row.fadeOut(300, function() { $row.remove(); });
        },
        error: function() {
            alert('Failed to delete user');
        }
    });
});