Content-type multipart/form-data vs application/json when submitting a form

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});