3

Tengo el siguiente problema: Estoy intentando hacer una consulta AJAX de tipo POST enviando un JSON a un controlador en Laravel, para luego grabar esa información en la BBDD, pero no encuentro donde está el error ya que la consulta no se ejecuta correctamente.

En el controlador voy a guardar ciertos datos del arreglo, no todos.

¿Cómo hago para enviar el token si no estoy usando un formulario?

Aquí esta mi ruta:

Route::name('registros.storereg')
    ->post('registros/storereg', 'RegistroController@storereg');

El JS:

$(function () {
$(document).on('click', '.grabar', function (event) {  
    saveData[0] = 2
    saveData[1] = 3
    saveData[2] = 4
    saveData[3] = 2
    saveData[4] = 5
    saveData[5] = 7
    saveData[6] = 2
    saveData[7] = 1
    saveData[8] = 5
    saveData[9] = 3
    saveData[9] = 3
    var jObject={};
    for(i in saveData)
    {
        jObject[i] = saveData[i];
    }

    jObject= JSON.stringify(jObject);
    alert(jObject);
    $.ajax({
            data: jObject,
            url:'registros.storereg',
            type:'POST',
            dataType: "json",
            success:function(server){
              alert('hola'+server);
            },
            error: function() {
                alert('error');
            }  

     });
    alert(jObject);

Y aquí el controlador:

     public function storereg(){
        $data = json_decode($_POST['jObject'], true);
        $registro = new Registro;
        $registro->user_id = 7; //Cojer el del usuario logeado
        $registro->objetivo_id = $data[2];   // Cojer de la tercera posición del arreglo de las selects
        $registro->fecha = '2007-08-18'; // Cojer de el datapicker de fechas semanales
        $registro->horasasumar = $data[3]; //Cojer del arreglo
        $registro->save();
        return redirect ()->route('objetivos.index')
                          ->with('info', 'El proyecto fué guardado');    
}
}

2 respuestas 2

2

Si usas dataType: "json" en tu petición XHR entonces tu página deberá devolver un JSON bien formado (incluyendo las cabeceras adecuadas) o en caso contrario tu petición devolverá siempre un error:

"json": Evaluates the response as JSON and returns a JavaScript object. Cross-domain "json" requests are converted to "jsonp" unless the request includes jsonp: false in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead.

Para generar un JSON hay que enviar la cabecera HTTP Content-Type: application/json para indicar que el tipo de contenido, y éste debería estar generado con json_encode para evitar errores humanos.

He desarrollado una prueba de concepto autónoma para mostrarte cómo se deben enviar los datos entre JavaScript y PHP de manera correcta:

<?php
if (isset($_POST['jObject'])) {
    /* No es necesario la conversión de JSON a dato nativo de PHP */
    $data = $_POST['jObject'];
    /* Si usamos "dataType: 'json'" debemos devolver un JSON */
    header('Content-Type: application/json');
    /* Monto un JSON con un campo de resultado y otro de depuración */
    die(json_encode([
        'resultado' => true,
        'recibido' => var_export($data, true),
    ]));
}
?><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function () {
    /* No es necesario tanta redundancia, así es más sencillo */
    $('.grabar').click(function (event) {
        /* No es necesario hacer la conversión en dos pasos */
        var saveData = {};
        saveData[0] = 2;
        saveData[1] = 3;
        saveData[2] = 4;
        saveData[3] = 2;
        saveData[4] = 5;
        saveData[5] = 7;
        saveData[6] = 2;
        saveData[7] = 1;
        saveData[8] = 5;
        saveData[9] = 3;
        saveData[10] = 3;
        $.ajax({
            /* Así los datos estarán disponibles en "$_POST['jObject']" */
            data: { 'jObject': saveData },
            /* Nos llamamos a nosotros mismos en esta prueba de concepto */
            url:'<?= $_SERVER['PHP_SELF'] ?>',
            type: 'post',
            /* Si tu página no devuelve un JSON entonces quita esta línea para evitar que te dé error una respuesta HTML */
            dataType: 'json',
            success: function(server) {
                /* Vuelco en la consola el contenido del objeto obtenido */
                console.log(server);
                /* Muestro en pantalla sólo el campo de depuración */
                alert(server.recibido);
            },
            error: function() {
                alert('error');
            }
        });
    })
});
</script>
<button class="grabar">Grabar</button>

Tu controlador modificado para devolver un JSON y acceder de forma directa a los datos enviados por XHR podría quedar así:

public function storereg() {
    $registro = new Registro;
    $registro->user_id = 7; // Coger el del usuario logeado
    $registro->objetivo_id = $_POST['jObject'][2];   // Coger de la tercera posición del arreglo de las selects
    $registro->fecha = '2007-08-18'; // Coger de el datapicker de fechas semanales
    $registro->horasasumar = $_POST['jObject'][3]; //Cojer del arreglo
    $registro->save();
    /* Informamos a Laravel que deseamos devolver un JSON */
    return response()->json([
        'resultado' => true,
        'recibido' => var_export($_POST['jObject'], true),
    ]);
}

Edición final:

Tras intercambiar información descubrimos dos fallos además de los corregidos en javascript:

  • Un error en el enrutador.
  • La protección CSRF bloqueaba el envío.

La ruta quedó:

Route::post('/registros/storereg', 'RegistroController@storereg');

Y para solucionar la protección CSRF agregamos a la vista un formulario invisible con la información del token:

<form name="csrf">
    {{ csrf_field() }}
</form>

Y el envío se modificó así:

    $.ajax({
        /* Así los datos estarán disponibles en "$_POST['jObject']" y
            agregamos el token CSRF */
        data: {
          'jObject': saveData,
          '_token': document.csrf._token.value,
        },
        /* Nos llamamos a nosotros mismos en esta prueba de concepto */
        url: '/registros/storereg',
        type: 'post',
        /* Si tu página no devuelve un JSON entonces quita esta línea para evitar que te dé error una respuesta HTML */
        dataType: 'json',
        success: function(server) {
            /* Vuelco en la consola el contenido del objeto obtenido */
            console.log(server);
            /* Muestro en pantalla sólo el campo de depuración */
            alert(server.recibido);
        },
        error: function() {
            alert('error');
        }
    });
6
  • Lo pruebo inmediatamente y te comento.
    – morrison
    Commented el 18 ago. 2017 a las 11:39
  • He terminado de completar mi respuesta con referencias al manual oficial. El PHP es autónomo, funciona por sí solo sin dependencia de ningún otro archivo ni framework como prueba de concepto. Al final he agregado una propuesta para el controlador, en el que devuelvo un JSON para que el javascript sea informado del resultado del trabajo. Commented el 18 ago. 2017 a las 11:51
  • ¿Qué tal fueron las pruebas? Commented el 18 ago. 2017 a las 15:10
  • He hecho muchas pruebas pero no logro que funcione. La prueba de concepto autónoma me ha confundido. No se donde poner lo del header('Content-Type: application/json'). Siempre me da error. En url yo tengo la ruta 'registros.storereg'.
    – morrison
    Commented el 18 ago. 2017 a las 16:54
  • 1
    Gracias por tu tiempo y dedicación
    – morrison
    Commented el 18 ago. 2017 a las 18:46
1

ojala te sirva:

        var token = '{{Session::token()}}';
        var url = '{{route('product.tocart')}}';
            $.ajax({
                        method: 'POST',
                        url: url,
                        data: {_token: token, id: id, cant: cant}
                    })
                    .done(function (msg) {

                    });
1
  • Gracias. Ya lo había resuelto con la respuesta de @Oscar Garcia, pero me apunto tu solución.
    – morrison
    Commented el 24 ago. 2017 a las 10:26

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.