4

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.

6
  • 1
    Yo haría dos cosas: 1. Cambiar esto: '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');
    – A. Cedano
    Commented el 30 mar. 2018 a las 19:42
  • 1
    Si devuelves un JSON en toda regla desde el servidor, haciendo lo indicado más arriba, no necesitarás hacer el parse. En Javascript, bastaría esto: var respuesta = xhr.responseText;
    – A. Cedano
    Commented el 30 mar. 2018 a las 19:50
  • @A.Cedano Muchas gracias. Haciendo lo que me dices ya no me salta el error. Lo único que el console.log(respuesta); me devuelve mucho código html y el div de "envio de formulario correcto" no se crea. Supongo que es porque estoy en un servidor local y no encuentra un mailserver y me da error ahí.
    – Dani
    Commented el 30 mar. 2018 a las 20:19
  • ¿Tu código PHP está controlado, de forma que sólo imprima el array que muestras al final de tu pregunta? ¿Pusiste el header como te dije en el primer comentario? Otra cosa que tendrías que hacer sería indicar el tipo de respuesta, poniendo esto: xhr.responseType = 'json';, lo puedes poner inmediatamente después de haber creado el objeto xhr.
    – A. Cedano
    Commented el 30 mar. 2018 a las 20:26
  • También, otra cosa que podría estar fastidiando al header sería la llamada a phpversion(), 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";
    – A. Cedano
    Commented el 30 mar. 2018 a las 20:30

2 respuestas 2

2

En esta linea del cliente (javascript):

xhr.send('nombre='+nombre+'&email='+email+'&telefono='+telefono+'&mensaje='+mensaje);

lo envías como "telefono", pero en el servidor (PHP) lo recibes como:

$telefono = $_POST['tlf'];

solo cambia eso en el servidor, ponlo como:

$telefono = $_POST['telefono'];

y listo. Espero te sea de ayuda.

1
  • El $telefono = $_POST['tlf']; es como lo recibo del código HTML del formulario. De todos modos he cambiado las variables, para que quede más claro. Gracias por la ayuda.
    – Dani
    Commented el 31 mar. 2018 a las 18:13
1

He probado el código de las dos maneras, y me funciona en ambas.

Aquí te indico las correcciones que he hecho, por orden de importancia.

  1. Establecer codificación adecuada. Cuando probé el código, los mensajes no me llegaban en utf-8, a pesar de poner esto: utf8_encode($mensajeCorreo). Poniendo un header real en utf-8 el problema se resolvió. Es probable que esto esté dando serios problemas en tu contexto.

  2. El div que estabas creando no lo estabas añadiendo al body del DOM. He corregido eso y me presenta en pantalla el mensaje Se envió correctamente.

  3. Como ya indicó Hugo, había un error en la variable del teléfono. De todos modos, esto no es motivo para que el código falle en sí.

Aquí te dejo las dos formas, aplicando cualquiera de ellas, debería funcionar.

Espero te sea de ayuda y se pueda resolver este caso.

1ª forma: obteniendo una respuesta de texto y convirtiéndola a JSON

Javascript:

var xhr = new XMLHttpRequest();
xhr.open ('POST', 'myget.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
    if(xhr.status === 200){
        var respuesta = JSON.parse( xhr.responseText );
        console.log(respuesta);
        if(respuesta.respuesta === true) {
            var div = document.createElement('div');
            /* Esto faltaba */
            document.body.appendChild(div);
            div.appendChild(document.createTextNode ('Se envió correctamente'));
        }
    }
}
/* Aquí todo manual por simplificar*/
xhr.send('nombre=nombre&email=email&telefono=telefono&mensaje=mensaje');

PHP:

    /*
        *Importante poner el header aquí, pues utf8_encode no estaba funcionando
        * e indicamos que este script dará una respuesta de tipo text
    */

    header('Content-Type: application/text; charset=utf-8');

    $nombre = $_POST['nombre'];
    $email = $_POST['email'];
    $mensaje = $_POST['mensaje'];
    $telefono = $_POST['telefono'];
    $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, $mensajeCorreo, $header );
    if ($respuesta) {    
        $arrJson=array(
              'mensaje'=>sprintf("el correo se ha enviado"),
              'datos'=> array(
                'nombre' => $nombre,
                'correo' => $email,
                'mensaje' => $mensaje
              ),
              'respuesta' => $respuesta
                );
    }else{
            $arrJson = error_get_last();
    }
    /*Indicamos que es una respuesta JSON*/
    echo json_encode($arrJson);

2ª forma: manejando una respuesta con tipo de dato JSON directamente desde el servidor

JavaScript:

var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open ('POST', 'myget.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
    if(xhr.status === 200){
        /* OJO: para JSON debemos poner aquí response, no responseText */
        var respuesta = xhr.response;
        console.log(respuesta);
        if(respuesta.respuesta === true) {
            var div = document.createElement('div');
            /* Esto faltaba */
            document.body.appendChild(div);
            div.appendChild(document.createTextNode ('Se envió correctamente'));
        }
    }
}
/* Aquí todo manual por simplificar*/
xhr.send('nombre=nombre&email=email&telefono=telefono&mensaje=mensaje');

PHP:

    /*
        *Importante poner el header aquí, pues utf8_encode no estaba funcionando
        * e indicamos que este script dará una respuesta JSON
    */

    header('Content-Type: application/json; charset=utf-8');

    $nombre = $_POST['nombre'];
    $email = $_POST['email'];
    $mensaje = $_POST['mensaje'];
    $telefono = $_POST['telefono'];
    $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, $mensajeCorreo, $header );
    if ($respuesta) {    
        $arrJson=array(
              'mensaje'=>sprintf("el correo se ha enviado"),
              'datos'=> array(
                'nombre' => $nombre,
                'correo' => $email,
                'mensaje' => $mensaje
              ),
              'respuesta' => $respuesta
                );
    }else{
            $arrJson = error_get_last();
    }
    /*Indicamos que es una respuesta JSON*/
    echo json_encode($arrJson);

Resultados:

En ambos casos obtenemos un JSON como este:

{
    "mensaje": "el correo se ha enviado",
    "datos": {
        "nombre": "nombre",
        "correo": "email",
        "mensaje": "mensaje"
    },
    "respuesta": true
}

En pantalla:

Se envió correctamente

Y en el correo electrónico:

Este mensaje fue enviado por: nombre
Email: email
Teléfono: telefono
Mensaje: mensaje

¿Algún problema con la función mail?

En una edición posterior de la respuesta he escrito un código PHP que controle lo ocurrido con la función mail, obteniendo un posible mensaje de error mediante error_get_last.

Si de todos modos tu código sigue sin funcionar, depura que no sea un problema con la función mail en tu entorno del siguiente modo:

  • comenta esta línea:

     //$respuesta = mail($para, $asunto, utf8_encode($mensajeCorreo), $header );
    
  • sustituye la variable respuesta:

     $respuesta = TRUE;
    

De ese modo, PHP no intentará enviar el email, la variable respuesta será TRUE y se creará un array como si el mensaje se hubiese enviado con éxito. Del lado de Javascript, todo debería ocurrir con normalidad, como si el mensaje se hubiese enviado.

Si aún así no funciona, entonces significa que hay un problema con la ruta de tu archivo, al que le envías la petición XHR.

Espero te sea de utilidad.

1
  • Te debo la vida. He tenido que forzar que la variable $respuesta sea TRUE pero ha funcionado. Por fin. Mil gracias por dedicar tu tiempo a ayudarme a ser un poco menos inepto en esto.
    – Dani
    Commented el 1 abr. 2018 a las 16:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.