Problems in AJAX query of POST type, sending JSON to Laravel controller

3

I have the following problem: I am trying to make a AJAX query POST by sending JSON to a controller in Laravel , to then record that information in the database, but I can not find where the error is because the query is not executed correctly.

In the controller I'm going to save some array data, not all.

How do I send the token if I am not using a form?

Here is my route:

Route::name('registros.storereg')
    ->post('registros/storereg', '[email protected]');

The 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);

And here the driver:

     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');    
}
}
    
asked by morrison 18.08.2017 в 13:07
source

2 answers

2

If you use dataType: "json" in your XHR request then your page should return a well-formed JSON (including headers) appropriate) or otherwise your request will always return an error:

  

"json": Evaluate the response as JSON and return to 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.

To generate a JSON you must send the HTTP header Content-Type: application/json to indicate the content type, and this should be generated with json_encode to avoid human errors.

I have developed a stand-alone concept test to show you how to send data between JavaScript and PHP correctly:

<?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>

Your modified driver to return a JSON and directly access the data sent by XHR might look like this:

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),
    ]);
}

Final Edition:

After exchanging information we discovered two bugs in addition to the ones fixed in javascript:

  • An error in the router.
  • Protection CSRF blocked the shipment.

The route was:

Route::post('/registros/storereg', '[email protected]');

And to solve the protection CSRF we added an invisible form with the information of the token to the view:

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

And the shipment was modified like this:

    $.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');
        }
    });
    
answered by 18.08.2017 / 13:32
source
1

I hope you serve:

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

                    });
    
answered by 21.08.2017 в 06:01