0

estoy trabajando en un formulario en PHP y necesito pasar desde JavaScript los datos de un array a PHP. Los datos provienen de una tabla

    <table id="tabla" class="tablaDetalle" style="background-color:lightgrey;height:auto; width: 700px;" border="1">
        <thead>
      <tr><th colspan="5" style="background: #4CAf50; text-align: center;">Detalle de Compra</th></tr>
            <tr><th style="background: #4CAF50;">Cantidad</th>
                <th style="background: #4CAF50;">Descripción</th>
                <th style="background: #4CAF50;">Bruto</th>
                <th style="background: #4CAF50;">Descuento</th>
          <th style="background: #4CAF50;"></th></tr>
        </thead>
    <tbody id="t_cuerpo">
        <tr>
          <td><input type="number" value="1" min="1" name="cantidad"></td>
            <td><input type="text" name="descripcion" required></td>
            <td><input type="number" name="bruto" min="0" value="0"></td>
            <td><input type="number" name="descuento" min="0" max="100" value="0"></td>
          <td><button class='remove'>-</button></td>
        </tr>
    </tbody>
</table>
          <input type="button" id="addRow" style="font-size:12px; padding: 8px 12px;" value="Nueva Fila" class="botonverde" />
          <button type="button" id="obtener">Obtener</button>

La tabla posee un script que genera y elimina filas

<script>
var html = "<tr><td><input type='number' value='1' min='1' name='cantidad'></td><td><input type='text' name='descripcion'></td><td><input type='number' name='bruto' min='0' value='0'></td><td><input type='number' name='descuento' min='0' max='100' value='0'></td><td><button class='remove'>-</button></td></tr>" ;

$(function() {
    $('tbody').sortable();

    $('#addRow').click(function(){
        $('#tabla > tbody:first').append(html);
    });

    $(document).on('click', '.remove', function() {
        $(this).parents('tr').remove();
    });
</script>

Para probar que los datos ingresados generé un array e hice este script

<script>
  $(document).ready(function() {

  $('#obtener').click(function() {
    var lista = [];
    $('#t_cuerpo input').each(function() {
      var valor_input = $(this).val();
              lista.push(valor_input);
    });
        $.ajax({
       type: "POST",
       url: "ingresocompras.php",
       datatype: 'JSON',
       data: {lista: JSON.stringify(lista)},
       success: function(data){
            alert("success:",data);
        },
       failure: function(errMsg) {
            alert("error:",errMsg);
       }
    });
    alert(lista);
  });
});
</script>

Para probar que de JavaScript envie los datos mediante JSON a PHP, hice este codigo pero el problema es que solo genera el array que lo puedo comprobar con el "alert(lista)", pero no envia los datos por JSON

<?php
    $data = json_decode($_POST["lista"]);
    echo $_POST["lista"];
    var_dump($data);
?>

Si alguien lee esto, hice algunos cambios en el script y me di cuenta de algunas cosas. Como soy nuevo en el uso de JS y Ajax, no puedo encontrar la solucion

Mi nuevo script es

<script type="text/javascript">
  $(document).ready(function() {

  $('#obtener').click(function() {
    var lista = new Array();
    $('#t_cuerpo input').each(function() {
      var valor_input = $(this).serialize();
              lista.push(valor_input);
    });
    var cadena = JSON.stringify(lista);
       $.ajax({
       type: "POST",
       url: "ingresocompras.php",
       datatype: 'JSON',
       data: { "cadena" : cadena },
       success: function(data){
            console.log("success:",data);
        },
       failure: function(errMsg) {
            alert("error:",errMsg);
       }
    });
    alert(cadena);
  });
});
</script>

Efectivamente alert(cadena) me devuelve lo que quiero gracias al serialize(). Pero el gran problema es el "console.log(success,data)". Al ejecutarlo, me DEVUELVE TODO EL DOCUMENTO. Algo asi

"success:   
<!DOCTYPE html>
<html>
<head>
...
"

No entiendo cual es el error, he buscado y no tengo ninguna solución

1
  • Pon la parte del código del servidor, porque lo más posible es que estés devolviendo el html , de vez de una petición json , por medio del json_encode , piensa que luego hay que hacer var datos = JSON.parse(data); console.log(datos.contenido); siendo contenido lo que te interesa.
    – CodeNoob
    Commented el 16 may. 2019 a las 19:04

1 respuesta 1

2

Sin la parte del servidor poco te puedo decir (cuando lo pongas editaré el post y te intentaré contestar mejor) pero fíjate con el explorador de Network en Chrome o el navegador que tengas. Siempre recomiendo lo mismo , hacer echos,var_dump , a lo largo del código y verlo en este caso con Network para ver el comportamiento , sino desde un IDE , haces un seguimiento paso a paso.

Por lo general funciona así la comunicación entre servidor y página.

Parte del servidor

$dato = [
    'estado' => 200,
    'datos' => [['paco','3€','patatas'],...]
];
echo json_enconde($dato);
exit();

Parte JS

El código no lo he comprobado pero es para que cojas el concepto. Las peticiones pro ajax tienen que ir en JSON , por consiguiente desde el servidor como ves hice json_encode , JS , tiene su propia función para estas cosas que es el JSON.parse() , para parsear el objeto JSON a un objeto comprensible para él.

  $.ajax({
       type: "POST",
       url: "ingresocompras.php",
       datatype: 'JSON',
       data: { "cadena" : cadena },
       success: function(data){
            var peticion = JSON.parse($data); //array tabla
            $.each(peticion,function(i,e){ //i = index , e = elemento
                 $('#tabla').append('<tr><td>'+e[0]+'</td><td>'+e[1]+'</td><td>'+e[2]+'</td></tr>')
            });
        },
       failure: function(errMsg) {
            alert("error:",errMsg);
       }
});

Inspeccionar con el navegador

Para que veas como hacerlo en Chrome sería :

  1. Secundario en la página web , inspeccionar.
  2. Click en Network.
  3. Haces las peticiones y vas viendo su comportamiento con el tipo de status. Que te salga.

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.