Estoy aprendiendo envío y recepción de datos en formato json a través de ajax y jquery. Solo que al enviarlos y recibirlos siempre tengo error de parseo pero ya traté de hacerle muchas modificaciones y aún no puedo solucionar mi problema, podrían ayudarme? Les agradezco de antemano.
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
$("#guarda_producto").click(function() {
if ($("#nombre_producto").val() == "") {
alert("Ingresa el nombre del producto por favor");
$("#nombre_producto").focus();
$("#nombre_producto").addClass("is-invalid");
return false;
} else if ($("#codigo_producto").val() == "") {
alert("Ingresa el código del producto por favor");
$("#codigo_producto").focus();
$("#codigo_producto").addClass("is-invalid");
return false;
} else if ($("#clave_producto").val() == "") {
alert("Ingresa la clave del producto por favor");
$("#clave_producto").focus();
$("#clave_producto").addClass("is-invalid");
return false;
} else if ($("#marca_producto").val() == "") {
alert("Ingresa la marca del producto por favor");
$("#marca_producto").focus();
$("#marca_producto").addClass("is-invalid");
return false;
} else if ($("#precio_compra_producto").val() == "") {
alert("Ingresa el precio de compra del producto por favor");
$("#precio_compra_producto").focus();
$("#precio_compra_producto").addClass("is-invalid");
return false;
} else if ($("#precio_venta_producto").val() == "") {
alert("Ingresa el precio de venta del producto por favor");
$("#precio_venta_producto").focus();
$("#precio_venta_producto").addClass("is-invalid");
return false;
} else if ($("#utilidad_paquete").val() == "") {
alert("Ingresa la utilidad del paquete por favor");
$("#utilidad_paquete").focus();
$("#utilidad_paquete").addClass("is-invalid");
return false;
} else if ($("#utilidad_pieza").val() == "") {
alert("Ingresa la utilidad por pieza por favor");
$("#utilidad_pieza").focus();
$("#utilidad_pieza").addClass("is-invalid");
return false;
} else if ($("#cantidad_producto").val() == "") {
alert("Ingresa la cantidad del producto por favor");
$("#cantidad_producto").focus();
$("#cantidad_producto").addClass("is-invalid");
return false;
} else if ($("#stock_minimo_producto").val() == "") {
alert("Ingresa el stock mínimo del producto por favor");
$("#stock_minimo_producto").focus();
$("#stock_minimo_producto").addClass("is-invalid");
return false;
} else if ($("#stock_maximo_producto").val() == "") {
alert("Ingresa el stock máximo del producto por favor");
$("#stock_maximo_producto").focus();
$("#stock_maximo_producto").addClass("is-invalid");
return false;
}
var formulario = $("#alta_productos").serialize();
$.ajax({
async: true,
url: '../ajax/alta_productos.php',
type: 'POST',
data: 'formulario=' + formulario,
beforeSend: function() {
alert()
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status === 0) {
alert('Not connect: Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (textStatus === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (textStatus === 'timeout') {
alert('Time out error.');
} else if (textStatus === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error: ' + jqXHR.responseText);
}
},
success: function(msg) {
//var retorno = jQuery.parseJSON(msg);
if (msg.estatus == 1) {
alert(msg.mensaje);
} else {
alert(msg.mensaje);
}
}
}); //del ajax
return false;
});
});
<form name="alta_productos" id="alta_productos" method="post" action="">
<div class="row">
<div class="col">
<div class="form-group">
<label for="nombre_producto">Nombre:</label>
<input type="text" class="form-control" name="nombre_producto" id="nombre_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="codigo_producto">Código:</label>
<input type="text" class="form-control" name="codigo_producto" id="codigo_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="clave_producto">Clave:</label>
<input type="text" class="form-control" name="clave_producto" id="clave_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="marca_producto">Marca:</label>
<input type="text" class="form-control" name="marca_producto" id="marca_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="categoria_producto">Categoria:</label>
<input type="text" class="form-control" name="categoria_producto" id="categoria_producto" />
</div>
</div>
<div class="col">
<div class="form-group">
<label for="precio_compra_producto">Precio de compra:</label>
<input type="text" class="form-control" name="precio_compra_producto" id="precio_compra_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="precio_venta_producto">Precio de venta:</label>
<input type="text" class="form-control" name="precio_venta_producto" id="precio_venta_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="clave_producto">Precio por pieza:</label>
<input type="text" class="form-control" name="precio_unidad_producto" id="precio_unidad_producto" />
</div>
<div class="form-group">
<label for="utilidad_paquete">Utilidad por paquete:</label>
<input type="text" class="form-control" name="utilidad_paquete" id="utilidad_paquete" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="utilidad_pieza">Utilidad por pieza:</label>
<input type="text" class="form-control" name="utilidad_pieza" id="utilidad_pieza" placeholder="Dato requerido" />
</div>
<p class="text-center"><input type="button" name="guarda_producto" id="guarda_producto" class="btn btn-success" value="Guardar"></p>
</div>
<div class="col">
<div class="form-group">
<label for="cantidad_producto">Cantidad:</label>
<input type="text" class="form-control" name="cantidad_producto" id="cantidad_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="stock_minimo_producto">Stock mínimo:</label>
<input type="text" class="form-control" name="stock_minimo_producto" id="stock_minimo_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="stock_maximo_producto">Stock máximo:</label>
<input type="text" class="form-control" name="stock_maximo_producto" id="stock_maximo_producto" placeholder="Dato requerido" />
</div>
<div class="form-group">
<label for="descripcion_producto">Descripción:</label>
<input type="text" class="form-control" name="descripcion_producto" id="descripcion_producto" />
</div>
<div class="form-group">
<label for="imgen_producto">Imagen producto:</label>
<input type="text" class="form-control" name="imgen_producto" id="imgen_producto" />
</div>
</div>
</div>
</form>
<?php
header("Content-type: application/json; charset=utf-8");
require('/clases/consultas.php');
$db = new consultas();
$var = array();
extract($_POST);
if(isset($nombre_producto)){
$var['estatus'] = 1;
$var['mensaje'] = "Perfecto";
echo json_encode($var);
exit();
} else {
$var['estatus'] = 0;
$var['mensaje'] = "Error";
echo json_encode($var);
exit();
}
?>
$nombre_producto
? Otra cosa, tantoconsultas.php
como la instancia que creas aquí:db = new consultas();
tienen totalmente prohibido imprimir cualquier cosa por pantalla o tener trozos de texto o contenido HTML. Con un espacio en blanco que tengan tu programa fallará.data: 'formulario=' + formulario,
Estas concatenando un string a un formulario previamente serializado. Prueba enviando solodata: formulario,
. Saludos!formulario
a los datos ya serializados? Prueba a pasar solamente:data: formulario,
y si lo que quieres es agregarle un nuevo par llave/valor a los datos serializados puedes hacer algo así:var formulario = $("#alta_productos").serialize() + "&otraclave=" + "otrovalor"
. Eso suele hacerse cuando quieres saber si, aparte del formulario se está pasando una acción en específico. Las formas de recuperar los datos del POST en tu PHP también requeriría ser mejorada.