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…».) |
|||
| Línia 30: | Línia 30: | ||
$('#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(); | ||
$.ajax({ | $.ajax({ | ||
| − | url: ' | + | url: 'ej_ajax.php', |
data: datos_formulario, | data: datos_formulario, | ||
type: 'POST', | type: 'POST', | ||
Revisió del 00:04, 25 març 2015
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Ajax</title>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</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();
$.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;
$resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario'];
echo json_encode($resultado);
?>
