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');
}
});