Foros del Web » Programando para Internet » Jquery »

Ajax con post no envía datos...

Estas en el tema de Ajax con post no envía datos... en el foro de Jquery en Foros del Web. Hola a todos! Llevo unos dias liado con un envio de un formulario que no acaba de funcionar y por mas que miro no encuentro ...
  #1 (permalink)  
Antiguo 03/07/2016, 03:00
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Ajax con post no envía datos...

Hola a todos!
Llevo unos dias liado con un envio de un formulario que no acaba de funcionar y por mas que miro no encuentro donde esta el fallo.
Tengo 3 archivos: formulario.php, scripts2.js y sendmsg.php

En formulario.php tengo el siguiente codigo:
Código PHP:
<!doctype html>
<
html>
<
head>
<
meta charset="UTF-8">
<
title>Documento sin título</title>
<
meta charset="UTF-8">
<
link rel="stylesheet" href="css/bootstrap.css">
<
link rel="stylesheet" href="css/idarte.css">
<
link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,400,700|Cabin|Raleway:100" rel="stylesheet" type="text/css">
<
meta name="viewport" content="initial-scale=1">
</
head>

<
body style="background-color:#fff !important">
<
div class="container">
                <
div class="row">
                    <
div class="col-md-12">
                        <
form class="form-horizontal" role="form" >
                            <
div class="form-group">
                                <
div class="col-sm-offset-2 col-sm-4">
                                    <
label for="nombre" class="sr-only">Nombre</label>
                                    <
input type="text" class="form-control nombre" id="nombre" name="nombre" placeholder="nombre"/>
                                </
div>
                            
                                <
div class="col-sm-4">
                                    <
label for="email" class="sr-only">email</label>
                                    <
input type="email" class="form-control email" id="email" name="email" placeholder="email" />
                                </
div>
                            </
div>
                            <
div class="form-group">
                                <
div class="col-sm-offset-2 col-sm-8">
                                    <
label for="mensaje" class="sr-only">mensaje</label>
                                    <
textarea class="form-control mensaje" rows="6" id="mensaje" name="mensaje" placeholder="mensaje"></textarea>
                                </
div>
                            </
div>
                            <
div class="form-group">
                                <
div class="col-sm-offset-2 col-sm-8">
                                    <
button type="button" class="btn btn-default boton_envio" id="boton_envio">
                                        
enviar mensaje
                                    
</button>
                                    <
div id="respuesta"></div>
                                    <
div class="alert alert-success enviook nover" role="alert">¡Mensaje enviado!</div>
                                    <
div class="alert alert-danger errorenvio nover" role="alert">¡Ha habido un error en el envío!</div>
                                </
div>
                            </
div>
                        </
form>
                    </
div>
                </
div>
            </
div>
            <
script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts2.js"></script>
</body>
</html> 
Despues en scripts2.js tengo esto:
Código HTML:
var x=$(document);
x.ready(inicializar);

function inicializar(){
	$("#boton_envio").on("click",enviar);
}

function enviar(){
	
	//recoger variables <- ok
	var nombre = $("#nombre").val();
	var email = $("#email").val();
	var validacion_email=/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
	var mensaje = $("#mensaje").val();
	
	
	//Comprobar variables <-ok
	if(nombre == ""){
		$("#nombre").focus();
		return false;
	}
	if(mensaje == ""){
		$("#mensaje").focus();
		return false;
	}
	if(mensaje.length < 3){
		$("#mensaje").focus();
		alert("Mensaje demasiado corto");
		return false;
	}
	if(email==""||!validacion_email.test(email)){
		$(".email").focus();
		return false;
	}
	
	//Enviar datos por post y Ajax
	var datos='nombre='+nombre+'&email='+email+'&mensaje='+mensaje;
	$('#respuesta').text(datos);
		$.ajax({
			type:"POST",
			url:"sendmsg.php",
			data:datos,
			success:function(){
				$('#boton_envio').hide();
				$('.enviook').css('display','block');
				$('.enviook').fadeOut(5000,function(){
					$('.boton_envio').fadeIn('slow');
				});
				$('#respuesta').load('sendmsg.php');
				$("#nombre").val("");
				$("#email").val("");
				$("#mensaje").val("");
			},	//Fin function Success
			error:function(){
				$('.boton_envio').hide();
				$('.errorenvio').css('display','block');
				$('.errorenvio').fadeOut(5000,function(){
					$('.boton_envio').fadeIn('slow');
				});
			}	//Fin function Error
	});

}
Y por ultimo en sendmsg.php tengo lo siguiente:

Código PHP:
<?php
// Guardar los datos recibidos en variables:
$nombre $_POST['nombre'];
$email $_POST['email'];
$mensaje $_POST['mensaje'];

echo 
"Hola $nombre te voy a enviar un email a $email con este mensaje:<br> $mensaje <br>";
// Definir el correo de destino:
$dest "[email protected]"
 
// Estas son cabeceras que se usan para evitar que el correo llegue a SPAM:
$headers "From: $nombre <$email>\r\n";  
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' "\r\n";
 
// Aqui definimos el asunto y armamos el cuerpo del mensaje
$asunto "Contacto";
$cuerpo "Nombre: ".$nombre."<br>";
$cuerpo .= "Email: ".$email."<br>";
$cuerpo .= "Mensaje: ".$mensaje;
 
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $mensaje != ''){
    
mail($dest,$asunto,$cuerpo,$headers);
    echo 
"Se ha enviado"//ENVIAR!
}else{
    echo 
"Ha habido un error";
}
?>
Sin embargo las variables no llegan a sendmsg, esto se puede ver porque la funcion jquery que muestra la respuesta del servidor muestra elmensaje "Hola , te voy a enviar un mensaje a con este mensaje" sin cargar las variables....
Llevo varios dias haciendo pruebas y no consigo ver donde esta el fallo...

Alguien podria decirmelo??

Gracias!
__________________
Tecnología y tutoriales
  #2 (permalink)  
Antiguo 03/07/2016, 03:08
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Ajax con post no envía datos...

Podrias decirnos si te arroja algun error?

Código Javascript:
Ver original
  1. error: function(jqXHR, textStatus, errorThrown){
  2.    alert(errorThrown);
  3. }

Saludos.
  #3 (permalink)  
Antiguo 03/07/2016, 13:14
 
Fecha de Ingreso: julio-2015
Mensajes: 85
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: Ajax con post no envía datos...

Los datos que envian los mandas como si fuesen tipo url y eso indicaria un Get y tu los recoges por post, has probado a enviar los datos en formato Json? Creo que seria mejor y es muy probable que funcione de esa manera
  #4 (permalink)  
Antiguo 03/07/2016, 15:03
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Ajax con post no envía datos...

ANtes que nada gracias Por contestar.

Cita:
Iniciado por MaNuX0218 Ver Mensaje
Podrias decirnos si te arroja algun error?

Código Javascript:
Ver original
  1. error: function(jqXHR, textStatus, errorThrown){
  2.    alert(errorThrown);
  3. }

Saludos.
No, no me arroja ningun error, la funcion de succes se ejecuta y es cuando veo que no ha recibido las variables.
Cita:
Los datos que envian los mandas como si fuesen tipo url y eso indicaria un Get y tu los recoges por post, has probado a enviar los datos en formato Json? Creo que seria mejor y es muy probable que funcione de esa manera
si pongo un dataType: "json" entonces no si me da error, y se ejecuta la funcion error.

Alguna otra idea?
__________________
Tecnología y tutoriales
  #5 (permalink)  
Antiguo 04/07/2016, 10:17
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Ajax con post no envía datos...

Prueba de esta manera haber que tal:

Código Javascript:
Ver original
  1. $.ajax({
  2.             type:"POST",
  3.             url:"sendmsg.php",
  4.             data: {
  5.                         nombre: $("#nombre").val(),
  6.                         email: $("#email").val(),
  7.                          mensaje: $("#mensaje").val()
  8.                         },
  9.             success:function(){
  10.                 $('#boton_envio').hide();
  11.                 $('.enviook').css('display','block');
  12.                 $('.enviook').fadeOut(5000,function(){
  13.                     $('.boton_envio').fadeIn('slow');
  14.                 });
  15.                 $('#respuesta').load('sendmsg.php');
  16.                 $("#nombre").val("");
  17.                 $("#email").val("");
  18.                 $("#mensaje").val("");
  19.             },  //Fin function Success
  20.             error:function(){
  21.                 $('.boton_envio').hide();
  22.                 $('.errorenvio').css('display','block');
  23.                 $('.errorenvio').fadeOut(5000,function(){
  24.                     $('.boton_envio').fadeIn('slow');
  25.                 });
  26.             }   //Fin function Error
  27.     });

Saludos.
  #6 (permalink)  
Antiguo 04/07/2016, 11:59
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Ajax con post no envía datos...

Cita:
Iniciado por MaNuX0218 Ver Mensaje
Prueba de esta manera haber que tal:

Código Javascript:
Ver original
  1. $.ajax({
  2.             type:"POST",
  3.             url:"sendmsg.php",
  4.             data: {
  5.                         nombre: $("#nombre").val(),
  6.                         email: $("#email").val(),
  7.                          mensaje: $("#mensaje").val()
  8.                         },
  9.             success:function(){
  10.                 $('#boton_envio').hide();
  11.                 $('.enviook').css('display','block');
  12.                 $('.enviook').fadeOut(5000,function(){
  13.                     $('.boton_envio').fadeIn('slow');
  14.                 });
  15.                 $('#respuesta').load('sendmsg.php');
  16.                 $("#nombre").val("");
  17.                 $("#email").val("");
  18.                 $("#mensaje").val("");
  19.             },  //Fin function Success
  20.             error:function(){
  21.                 $('.boton_envio').hide();
  22.                 $('.errorenvio').css('display','block');
  23.                 $('.errorenvio').fadeOut(5000,function(){
  24.                     $('.boton_envio').fadeIn('slow');
  25.                 });
  26.             }   //Fin function Error
  27.     });

Saludos.
Increible..... mismo error.. no recoge las variables... Sigue sin funcionar...
Alguna idea de porque puede ser???
__________________
Tecnología y tutoriales
  #7 (permalink)  
Antiguo 04/07/2016, 12:48
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Ajax con post no envía datos...

Antes de nada vamos a comprobar que se recoje bien los datos:

Después de "$('#respuesta').text(datos);", pon esto:

Código Javascript:
Ver original
  1. alert("Nombre: " + $("#nombre").val() + ", Email: " + $("#email").val() + ", Mensaje: " + $("#mensaje").val());
  2.  
  3. return false;

Si los datos los recoje bien, el problema esta en el archivo sendmsg.php.

Dime que tal te ha ido y continuamos.

Saludos.
  #8 (permalink)  
Antiguo 04/07/2016, 13:59
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 15 años, 4 meses
Puntos: 10
Respuesta: Ajax con post no envía datos...

Bueno.... pues por fin parece que funciona...
Al ponerlo como MaNuX0218 me ha dicho ha funcionado...
En un principio no, pero al rescatar el backup del archivo y modificar solo lo de
Código HTML:
data: {
                        nombre: $("#nombre").val(),
                        email: $("#email").val(),
                         mensaje: $("#mensaje").val()
                        },
ha funcionado perfectamente...
No sé en que momento he modificado algo que hacía que no funcionara nada... Copio y pego el codigo por fin correcto :

Código HTML:
function enviarCorreo(){

	//recoger variables <- ok
	var nombre=$(".nombre").val();
	var email=$("#email").val();
	var mensaje=$("#mensaje").val();
	
	validacion_email=/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
	
	//Comprobar variables <-ok
	if(nombre==""){
		$(".nombre").focus();
		return false;
	}
	
	if(email==""||!validacion_email.test(email)){
		$(".email").focus();
		return false;
	}
	if(mensaje==""){
		$(".mensaje").focus();
		return false;
	}
	
	if(mensaje.length < 3){
		$("#mensaje").focus();
		alert("Mensaje demasiado corto");
		return false;
	}
		
	$.ajax({
		type:"POST",
		url:"sendmsg.php",
		data:{
			nombre: $("#nombre").val(),
			email: $("#email").val(),
			mensaje: $("#mensaje").val()
		},
		success:function(){
			$('.boton_envio').hide();
			$('.enviook').css('display','block');
			$('.enviook').fadeOut(5000,function(){
				$('.boton_envio').fadeIn('slow');
			});
			$("#nombre").val("");
			$("#email").val("");
			$("#mensaje").val("");
		},
		error:function(){
			$('.boton_envio').hide();
			$('.errorenvio').css('display','block');
			$('.errorenvio').fadeOut(5000,function(){
				$('.boton_envio').fadeIn('slow');
			});
		}
	});
	return false;
}
Muchisimas gracias MaNuX0218 y dardosmania por la ayuda.
Un abrazo!
__________________
Tecnología y tutoriales
  #9 (permalink)  
Antiguo 04/07/2016, 14:02
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Ajax con post no envía datos...

Me alegro que lo hallas solucionado. Y para eso estamos

Un saludo ;)

Etiquetas: ajax, post
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:34.