Soy nuevo en esto del diseño web. Tengo un error a la hora de enviar el formulario de contacto y ya no se que hacer, he pedido la cuenta de los días que llevo dándole vueltas a esto. Hoy he encontrado esta web, y me ha solucionado muchísimas dudas, pero el error en mi web persiste.
El error que me da es este:
VM5395:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onload
Ya he visto que hay otros hilos, pero haciendo lo que se propone en las respuestas sigue pasando lo mismo.
Mi código js es este:
(function() {
'use strict';
window.addEventListener('load', function() {
// Seleccionar el formulario
var forms = document.getElementsByClassName('needs-validation');
// Validar cada campo
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault();
if (form.checkValidity() === false) {
event.stopPropagation();
} else {
var nombre = document.getElementById ('nombre').value,
email = document.getElementById ('email').value,
telefono = document.getElementById ('tlf').value,
mensaje = document.getElementById ('mensaje').value;
var xhr = new XMLHttpRequest();
xhr.open ('POST', 'http://localhost/ramirezdiaz/enviar.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
if(xhr.status === 200){
console.log(xhr.responseText);
var respuesta = JSON.parse( xhr.responseText );
console.log(respuesta);
if(respuesta.respuesta === true) {
var div = document.createElement('div');
div.appendChild(document.createTextNode ('Se envió correctamente'));
div.classList.add('alert', 'alert-success', 'mt-2', 'text-center');
document.querySelector('form').appendChild(div);
}
}
}
xhr.send('nombre='+nombre+'&email='+email+'&telefono='+telefono+'&mensaje='+mensaje);
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
Y el código php es este:
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$telefono = $_POST['tlf'];
$header = "From: " . $email . "\r\n";
$header .= "X-Mailer: PHP/" . phpversion() . "\r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";
$mensajeCorreo = "Este mensaje fue enviado por: " . $nombre . "\r\n";
$mensajeCorreo .= "Email: " . $email . "\r\n";
$mensajeCorreo .= "Teléfono: " . $telefono . "\r\n";
$mensajeCorreo .= "Mensaje: " . $mensaje . "\r\n";
$para = "[email protected]";
$asunto = "Contacto de sitio web";
$respuesta = mail($para, $asunto, utf8_encode($mensajeCorreo), $header );
echo json_encode(array(
'mensaje'=>sprintf("el correo se ha enviado"),
'datos'=> array(
'nombre' => $nombre,
'correo' => $email,
'mensaje' => $mensaje
),
'respuesta' => $respuesta
));
?>
Espero que alguien pueda echarme una mano. Muchas gracias por adelantado.
'mensaje'=>sprintf("el correo se ha enviado")
por esto:'mensaje'=>"el correo se ha enviado"
y, 2. antes del echo, indicar el header del siguiente modo:header('Content-Type: application/json');
var respuesta = xhr.responseText;
xhr.responseType = 'json';
, lo puedes poner inmediatamente después de haber creado el objetoxhr
.header
sería la llamada aphpversion()
, no estoy seguro, pero puede que esta función haga algún intento de salida por pantalla. Entonces, cambia también esto:$header .= "X-Mailer: PHP/" . phpversion() . "\r\n";
por esto:$header .= "X-Mailer: PHP/" . PHP_VERSION . "\r\n";