14/40 - AJAX and the Cars

This week I have been assembling a virtual car garage using the XML dealership from this blog. At the end of this challenge, I plan to create a dynamic webpage where users can interact with 3-D models. I am using pre-existing models from the fab marketplace and three.js to render the models.

fetch('assets/update_car.php', {

AJAX to update my 'cars.xml' file

As shown in the code below, AJAXS offers a viable solution to dynamically update the content of a page or xml files without needing to reload the page. after submitting an edited car the back and front end are both updated based on the user's inputs.

fetch('assets/update_car.php', {
    method: 'POST', // Specifies that this is a POST request
    headers: {
        // Tells the server that the body of the request is in JSON format
        'Content-Type': 'application/json' 
    },
    // Converts the updatedCar object to a JSON string to send to the server
    body: JSON.stringify(updatedCar)
})
// Waits for the server response and converts it to text
.then(response => response.text())
.then(data => {
    // Displays an alert with the server response
    alert(data);
    if (data.includes('Car details updated successfully')) {
        // Refreshes the car data if the update was successful
        fetchCarData();
    }
})
// Logs any errors that occur during the request
.catch(error => console.error('Error updating car:', error));