0

Tengo un par de dudas con AJAX. Estoy tratando de guardar los datos de un formulario y quiero retornar una respuesta la cual estoy instanciando en mi metodo ajax y construyendo en la query del DAO para ser devuelta como log.

Aquí pueden ver mi formdata y mi ajax:

var infoEmpleado = new FormData();

var nombre = $('input[name="nombre"]').val();
var apellidos = $('input[name="apellidos"]').val();
var email = $('input[name="email"]').val();
var accion = $('input[name="accion"]').val();

infoEmpleado.append('nombre', nombre);
infoEmpleado.append('apellidos', apellidos);
infoEmpleado.append('email', email);
infoEmpleado.append('accion', accion);

$.ajax({
  url: '../controller/empleadoControlador.php',
  type: 'POST',
  contentType: false,
  data: infoEmpleado,
  processData: false,
  cache: false,
  success: function(data) {
    const xhr = new XMLHttpRequest();
    const respuesta = JSON.parse(xhr.responseText);
    if (respuesta.respuesta == 'correcto') {
      Swal.fire({
        position: 'center',
        type: 'success',
        title: 'Alta completada',
        showConfirmButton: false,
        timer: 1500
      })
      setTimeout(function() {
        window.location.replace("../index.php");
      }, 2000);
    } else {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'ID o password incorrecto',
        showConfirmButton: false,
        timer: 1500
      })
  }
}


 });

Aquí tengo el controlador que recibe los datos para mandarlos al DAO:

if ($_POST['accion'] == 'crearEmpleado') {

        $empleado = new Empleado();
        $empDao = new EmpleadoDAO();
        $nombre = $empleado->setNombre($_POST['nombre']);
        $apellidos = $empleado->setApellidos($_POST['apellidos']);
        $email = $empleado->setEmail($_POST['email']);
        $empDao->insertarEmpleado($empleado);

}

Y aquí el DAO que lo recibe y donde he decidido construir la respuesta:

public function insertarEmpleado($empleado)
{
    $stmt = $this->db->prepare("INSERT INTO empleado (nombre, apellidos, email) VALUES (?, ?, ?)");
    $stmt->bindValue(1, $empleado->getNombre());
    $stmt->bindValue(2, $empleado->getApellidos());
    $stmt->bindValue(3, $empleado->getEmail());
    $resultadoRegistro = $stmt->execute();
    if ($resultadoRegistro) {
          $respuesta = array(
              'respuesta' => 'correcto',
              'datosEmpleado' => array(
                'nombre' => $empleado->getNombre(),
                'apellidos' => $empleado->getApellidos(),
                'email' => $empleado->getEmail(),
              )
          );
          echo json_encode($respuesta);
        return $this->db->lastInsertId();
    } else {
      $respuesta = array(
          'respuesta' => 'error'
      );
      echo json_encode($respuesta);
        return -1;
    }
}

La consola me retorna esto:

Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Object.success (app.js:97)
    at fire (jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
    at done (jquery-1.12.4.js:9840)
    at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

No sé cómo hacerlo y la documentación no la entiendo. Necesito que me lo expliquen como si fuera tonto por favor.

17
  • En cuanto la 1ª duda: en esta parte success: function(respuesta) { el parámetro respuesta representa, como su nombre bien indica, la respuesta del servidor, o sea, todo lo que sale por pantalla desde el servidor, si la petición tuvo éxito (success). Eso no tiene nada que ver con lo mandaste en data, que es lo que recibe el servidor en $_POST. En cuanto a la 2ª duda: eso depende de lo que ocurra en tu archivo controladorModelo.php. Debes seguir el flujo del mismo, depurando las variables que maneje, para determinar por qué siempre termina diciendo que ha guardado con éxito.
    – A. Cedano
    Commented el 9 feb. 2020 a las 18:07
  • No puedes hacer un JSON.parse sin antes comprobar que el servidor responde siempre un JSON. Debes escribir un código coherente. Esto no tiene sentido: return $this->db->lastInsertId(); por lo tanto comenta esa línea. Esto tampoco tiene sentido: return -1; comenta también esa línea y prueba. Al poner esos return puede que te estén fastidiando el JSON. Y prueba la respuesta haciendo un console.log(xhr.responseText); directamente. No es cuestión de volverse loco, sino de aprender a depurar, a probar qué hay en los datos, ¿me explico?
    – A. Cedano
    Commented el 18 feb. 2020 a las 15:12
  • Sí, gracias a ti he llegado a la conclusión de que mi problema es que no sé depurar. Te lo agradezco muchísimo porque me pondré las pilas en ese sentido. Commented el 18 feb. 2020 a las 19:04
  • He comentado los return y he hecho el log del xhr.responsetext pero está vacío, no undefined, sino vacío. En la consola sale la línea pero no pone nada... Commented el 18 feb. 2020 a las 19:06
  • entiendo que esto está pasando porque creo el objeto xhr pero está vacío. Debería hacer un xhr.open(url), luego un xhr.onload y así ya tendría un xhr.responsetext con valor? esto funciona con javascript puro pero no sé si con ajax jquery es lo más correcto... Commented el 18 feb. 2020 a las 19:09

2 respuestas 2

1

En cuanto a tu primera duda, la parte del success está bien explicada en la documentación:

success

Type: Function( Anything data, String textStatus, jqXHR jqXHR )

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.


success

Tipo: Función (Cualquier cosa data, Cadena textStatus, jqXHR jqXHR)

Una función que se llamará si la solicitud tiene éxito. La función obtiene tres argumentos: los datos devueltos por el servidor, formateados según el parámetro dataType o la función de devolución de llamada dataFilter, si se especifica; una cadena que describe el estado; y el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest). A partir de jQuery 1.5, la configuración de success puede aceptar una variedad de funciones. Cada función se llamará por turno. Este es un evento Ajax.

Es decir, lo que hay en tu objeto respuesta no tiene nada que ver con lo que mandaste al servidor, sino con lo que éste respondió. Precisamente dices que en la consola me pinta todo el código html con la lista de empleados guardados..., porque lo que está respondiendo el servidor a tu petición es esa lista. Y si tu servidor sólo responde Hola, pues lo que tendrás en respuesta es Hola.

Lo que mandaste al servidor, en el parámetro data de la petición Ajax, el servidor lo recibió en $_POST y lo procesó para devolverte la respuesta que esperas. No tendría ningún sentido que el servidor responda con lo mismo que le mandaste. Aún así, si quieres de vuelta lo mismo que mandaste puedes responder con un print_r($_POST); y lo tendrías de vuelta.

En cuanto a tu segunda duda, podemos ver lo que dice la documentación sobre la parte error de las peticiones Ajax:

error

Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." (in HTTP/2 it may instead be an empty string) As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.


error

Tipo: Función (jqXHR jqXHR, Cadena textStatus, Cadena errorThrown)

Una función que se llamará si la solicitud falla. La función recibe tres argumentos: el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest), una cadena que describe el tipo de error que ocurrió y un objeto de excepción opcional, si ocurrió uno. Los valores posibles para el segundo argumento (además de nulo) son "timeout", "error", "abort" y "parsererror". Cuando se produce un error HTTP, errorThrown recibe la parte textual del estado HTTP, como "No encontrado" o "Error interno del servidor". (en HTTP / 2 puede ser una cadena vacía) A partir de jQuery 1.5, la configuración de error puede aceptar una serie de funciones. Cada función se llamará por turno. Nota: No se llama a este controlador para las solicitudes JSONP entre dominios y las secuencias de comandos entre dominios. Este es un evento Ajax.

En tu segunda duda dices que no entiendes por qué, tratando de provocar un error en el controlador, nunca entra en la parte de error. Hay que entender que esta parte de error es para controlar errores reales, no errores de lógica en tu código. Para probarla basta con que provoques un error de servidor en tu controlador. Si provocas por ejemplo un error 500, cometiendo a propósito un error de sintaxis en tu controlador, o un error 4040 dirigiendo la petición a una URL que no existe, etc.

Los errores de lógica tendrían que ser controlados también en el success. Supongamos que mandas a buscar los datos de un empleado y éste no existe. Entonces desde el servidor podrías responder con un JSON que contenga la clave error (en ese caso tienes que indicarlo en el dataType) Pero el código no entrará en la parte error de Ajax que es una cosa distinta. Realmente la petición funcionó, en el sentido de que no hubo ningún error de red o de servidor. Entonces para manejar ese error harías algo como esto:

PHP:

if (... hay datos ...){
    $mData= ... array con los datos 
} else {
    $mData=array ("error"=>"Esto es un error lógico: No se encontraron los datos");
}
echo json_encode($mData);

JS:

  success: function(respuesta) {
       if (respuesta.error) {
           console.log(respuesta.error);
           //Hacer lo que haya que hacer
       }else{
           //Se encontraron los datos que se pedían, mostrarlos aquí
       }
4
  • ok ya entendí. El problema es que quiero ver lo que estoy mandando porque a la hora de crear un registro, lo hace bien, pero cuando lo actualizo, no lo hace. Con lo que me has dicho del print post podré sacarlo. Gracias!! Commented el 9 feb. 2020 a las 19:50
  • El problema sigue estando en el error. He editado mi publicación para que veas que lo he puesto como tú me has dicho. Aún así, sigo teniendo el mismo problema... Commented el 9 feb. 2020 a las 19:51
  • @InfiniteRoads, el que en este bloque success: function(respuesta) { declares el parámetro como response o como data es indiferente. Como ya expliqué, ese objeto no tiene que ver con el parámetro data que pasas al servidor en la petición Ajax. Si no lo puedes resolver verifica con un console.log lo que está respondiendo el servidor y si quieres agrégalo a la pregunta para poder ayudarte mejor. Y muestra también cómo estás trabajando en el servidor para poder escribir el código conforme a esa lógica.
    – A. Cedano
    Commented el 9 feb. 2020 a las 22:34
  • Sigo volviéndome loco con esto. Edito pregunta principal. Commented el 18 feb. 2020 a las 13:17
0

Data ya está definido

  data: infoEmpleado,

Deberías utilizar otro nombre para el paŕametro.

success: function(response)

Comprobar el error

if (data.error) {
  console.log('Hubo un error');
}

Tu código espera la entrada error dentro de tu respuesta, pero no la encuentra porque estás dando una respuesta JSON de parte del servidor, en todo caso sería

response["error"]

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.