Diferència entre revisions de la pàgina «Solució formulari ajax»
De wikiserver
(Es crea la pàgina amb «<source lang="html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial Ajax</title> </head> <body> <section id="contenedor-formulario"> <fo…».) |
|||
| (Hi ha 3 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 5: | Línia 5: | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>Tutorial Ajax</title> | <title>Tutorial Ajax</title> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
</head> | </head> | ||
<body> | <body> | ||
| Línia 20: | Línia 21: | ||
</section> | </section> | ||
<section id="respuesta"></section> | <section id="respuesta"></section> | ||
| − | + | ||
</body> | </body> | ||
</html> | </html> | ||
| Línia 30: | Línia 31: | ||
$('#tuto-ajax-form').submit(function(evento){ | $('#tuto-ajax-form').submit(function(evento){ | ||
$('#respuesta').hide(); | $('#respuesta').hide(); | ||
| − | evento.preventDefault(); | + | evento.preventDefault(); //Esta función recibe un objeto de evento, sobre el cual invocamos la función preventDefault() para evitar que el formulario sea enviado de manera tradicional. |
| − | var datos_formulario = $(this).serialize(); | + | var datos_formulario = $(this).serialize(); //$('#tuto-ajax-form').serialize() |
$.ajax({ | $.ajax({ | ||
| − | url: ' | + | url: 'ej_ajax.php', |
data: datos_formulario, | data: datos_formulario, | ||
type: 'POST', | type: 'POST', | ||
| Línia 49: | Línia 50: | ||
<?php | <?php | ||
| − | $resultado['enviado'] = $_POST; | + | $resultado['enviado'] = $_POST; //array amb literal, és igual que usar $resultado[0] |
| − | $resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario']; | + | $resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario']; //array amb literal, és igual que usar $resultado[1] |
echo json_encode($resultado); | echo json_encode($resultado); | ||
?> | ?> | ||
</source> | </source> | ||
Revisió de 18:51, 30 maig 2016
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<section id="contenedor-formulario">
<form id="tuto-ajax-form">
<input type="text" id="nombre" name="nombre" placeholder="Su nombre"><br>
<input type="tel" id="telefono" name="telefono" placeholder="Su teléfono"><br>
<label for="horario">Hora de contacto</label><br>
<input name="horario" type="radio" checked="checked" value="Mañana"> Mañana<br>
<input name="horario" type="radio" value="Tarde"> Tarde<br>
<button type="submit">Enviar</button>
</form>
</section>
<section id="resultados">
</section>
<section id="respuesta"></section>
</body>
</html>$(document).ready(function(){
$('#respuesta').hide();
$('#tuto-ajax-form').submit(function(evento){
$('#respuesta').hide();
evento.preventDefault(); //Esta función recibe un objeto de evento, sobre el cual invocamos la función preventDefault() para evitar que el formulario sea enviado de manera tradicional.
var datos_formulario = $(this).serialize(); //$('#tuto-ajax-form').serialize()
$.ajax({
url: 'ej_ajax.php',
data: datos_formulario,
type: 'POST',
dataType: 'json',
success: function(datos){
$('#resultados').text(JSON.stringify(datos, null, 4));
$('#respuesta').text(datos.respuesta).fadeIn('slow');
}
});
});
});<?php
$resultado['enviado'] = $_POST; //array amb literal, és igual que usar $resultado[0]
$resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario']; //array amb literal, és igual que usar $resultado[1]
echo json_encode($resultado);
?>
