¿Cómo enviar datos desde AJAX?
Publicado por adria (1 intervención) el 05/08/2021 10:47:03
Tengo un ejercicio de crear 3 inputs para introducir 3 números. Al lado del servidor se ha de calcular cual de ellos es menor e imprimirlo. La acción del envio de los números se realiza mediante un botón submit i el método post. El envio de las dadas del cliente al servidor se debe realizar con AJAX.
He hecho esto en HTML:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Formmethod="POST"class="form">
<inputtype="number"name="Numero1"id="Numero1">
<inputtype="number"name="Numero2"id="Numero2">
<inputtype="number"name="Numero3"id="Numero3">
<buttontype="submit"value="Enviar">ENVIAR</button>
<divclass="respuesta"></div>
</Form>
<scriptsrc="ajax.js"></script>
</body>
</html>
Luego en AJAX y PHP:
<?php
$numero1=$_POST['form'];
$numero2=$_POST['form'];
$numero3=$_POST['form'];
if(strlen($numero1) < ($numero2) && ($numero3)) {
echojson_encode($numero1.' es menor ');
if(strlen($numero2) < ($numero1) && ($numero3)) {
echojson_encode($numero2.' es menor ');
}
if(strlen($numero1) < ($numero2) && ($numero3)) {
echojson_encode($numero3.' es menor');
}
}
?>
constform= document.querySelector('form')
constinput= document.querySelectorAll('input')
//const input = document.getElementsByName('input')
form.addEventListener('submit', e => {
e.preventDefault()
constformData=newFormData(form)
// config
consturl='index.php'
constoptions= {
method:'POST',
body: formData
}
// peticion asincrona con fetch
fetch(url, options)
.then(response => response.json()) // toda la peticion
.then(data => respuesta.textContent= data) // respuesta del backend
.catch(error => console.log(error))
})
No me imprime el resultado...¿Qué hay de problema?
He hecho esto en HTML:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Formmethod="POST"class="form">
<inputtype="number"name="Numero1"id="Numero1">
<inputtype="number"name="Numero2"id="Numero2">
<inputtype="number"name="Numero3"id="Numero3">
<buttontype="submit"value="Enviar">ENVIAR</button>
<divclass="respuesta"></div>
</Form>
<scriptsrc="ajax.js"></script>
</body>
</html>
Luego en AJAX y PHP:
<?php
$numero1=$_POST['form'];
$numero2=$_POST['form'];
$numero3=$_POST['form'];
if(strlen($numero1) < ($numero2) && ($numero3)) {
echojson_encode($numero1.' es menor ');
if(strlen($numero2) < ($numero1) && ($numero3)) {
echojson_encode($numero2.' es menor ');
}
if(strlen($numero1) < ($numero2) && ($numero3)) {
echojson_encode($numero3.' es menor');
}
}
?>
constform= document.querySelector('form')
constinput= document.querySelectorAll('input')
//const input = document.getElementsByName('input')
form.addEventListener('submit', e => {
e.preventDefault()
constformData=newFormData(form)
// config
consturl='index.php'
constoptions= {
method:'POST',
body: formData
}
// peticion asincrona con fetch
fetch(url, options)
.then(response => response.json()) // toda la peticion
.then(data => respuesta.textContent= data) // respuesta del backend
.catch(error => console.log(error))
})
No me imprime el resultado...¿Qué hay de problema?
Valora esta pregunta
0