Los detalles dependen exclusivamente de la implementación de tu backend, sin embargo generalmente se hace un request al mismo por medio de fetch
con los datos que quieres enviar.
De la documentación, para subir contenido JSON (en el ejemplo la variable data
) a un backend por medio de la ruta /profile
y utilizando un pedido HTTP
de tipo post
:
const data = { username: 'example' };
fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
Combinando tu implementación con el ejemplo que viene en la documentación, una posible solución se vería cómo así:
const name = document.getElementById('name')
const last = document.getElementById('lastname')
const email = document.getElementById('email')
const quest = document.getElementById('quest')
const form = document.getElementById('form')
const text = document.getElementById('warnings')
function enviarDatos(datos) {
fetch(url, {
method: 'POST',
body: JSON.stringify(datos),
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
};
form.addEventListener("submit", e => {
e.preventDefault()
let warnings = ''
let send = false
text.innerHTML = 'enviado'
if (name.value.length < 3) {
warnings += 'El nombre no es valido <br>'
send = true
}
if (last.value.length < 3) {
warnings += 'El apellido no es valido <br>'
send = true
}
if (quest.value.length < 10) {
warnings += 'Lo que sabes hacer es muy poco <br>'
send = true
}
if (send) {
text.innerHTML = warnings
}
send && enviarDatos({
quest: quest.value,
last: last.value,
name: name.value
});
return false
})