0

Buen día. Soy nuevo utilizando jquery y php, puede que esto sea muy fácil de resolver pero necesito de su ayuda por favor. Tengo un formulario hecho en HTML, capturo la información llenada en ese formulario a través de un archivo desarrollado en js (main.js) y la envío con json a un archivo php (crud.php) en donde utilizo dicha información para realizar consultas a una BDD desarrollada en PHPmyAdmin. El problema es que no se envía la información llenada en el formulario y por ende no se puede realizar la consulta sql (añadí un console.log() en el archivo main.js para ver si captura los datos, si los captura en el archivo main.js pero no se envían al archivo crud.php porque cuando muestro por consola la variable que debería recibir dicha info en el archivo crud.php aparece vacía ) A continuación añado los códigos del archivo main.js y del archivo crud.php Quedo atento ante cualquier sugerencia Muchas gracias.

Código Archivo main.js

 $(document).ready(function(){
    //nombre de la tabla en archivo php 
    tablaPersonas = $("#tablaPersonas").DataTable({ 
    "language": {
            "lengthMenu": "Mostrar _MENU_ registros",
            "zeroRecords": "No se encontraron resultados",
            "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "infoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sSearch": "Buscar:",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast":"Último",
                "sNext":"Siguiente",
                "sPrevious": "Anterior"
             },
             "sProcessing":"Procesando...",
        }
    });
    
$("#btnNuevo").click(function(){
    //nombre dle formulario dentro del modal
    $("#formPersonas").trigger("reset");
    $(".modal-header").css("background-color", "#1cc88a");
    $(".modal-header").css("color", "white");
    $(".modal-title").text(" Registro");            
    $("#modalCRUD").modal("show");        
    id=null;
});    
    
//var fila; //capturar la fila para editar o borrar el registro
    
$("#formPersonas").submit(function(e){       
    e.preventDefault();  
    //nombre de los input en el formulario   
    var anillamador = $.trim($("#anillamador").val());
    var cedula = $.trim($("#cedula").val());
    var ticket = $.trim($("#ticket").val());
    var fecha = $.trim($("#fecha").val());
    var requerimiento = $.trim($("#requerimiento").val());
    var escalado = $.trim($("#escalado").val()); 
   console.log(anillamador);
   console.log(cedula);
   console.log(ticket);
   console.log(fecha);
   console.log(requerimiento);
   console.log(escalado);
    $.ajax({ 
        //URL para enviar y recibir datos
        url: "bd/crud.php",
        type: "POST",
        dataType: "json",
        data: {anillamador:anillamador, cedula:cedula, ticket:ticket, fecha:fecha, requerimiento:requerimiento, escalado:escalado, id:id},
        
        success: function(data){  
            console.log(data);// para ver el resultado que se recibe 
            id = data[0].id; // posible error         
            anillamador = data[0].anillamador;
            cedula = data[0].cedula;
            ticket = data[0].ticket;
            fecha = data[0].fecha;
            requerimiento = data[0].requerimiento;
            escalado = data[0].escalado;
           /// if(opcion == 1){tablaPersonas.row.add([id,anillamador,cedula,ticket,fecha,requerimiento,escalado]).draw();}
           // else{tablaPersonas.row(fila).data([id,anillamador,cedula,ticket,fecha,requerimiento,escalado]).draw();}            
           tablaPersonas.row.add([id,anillamador,cedula,ticket,fecha,requerimiento,escalado]).draw();
        }        
    }); 
    //nombre modal 
    $("#modalCRUD").modal("hide");    
    
});    
    
});

Código archivo crud.php

     <?php
include_once 'bd/conexion.php';
//include_once 'conexion.php';
$objeto = new Conexion();
$conexion = $objeto->Conectar();
//print_r($conexion);
// Recepción de los datos enviados mediante POST desde el JS   
// isset determina si una variable esta definida y no es nula
$jsonBody = json_decode(file_get_contents('php://input'),true);
          // condicion              si es verdadero (?)       si es falso (:)
            $anillamador = isset($jsonBody['anillamador']) ? $jsonBody['anillamador'] : '';
            $cedula = (isset($jsonBody['cedula'])) ? $jsonBody['cedula'] : '';
            $ticket = (isset($jsonBody['ticket'])) ? $jsonBody['ticket'] : '';
            $fecha = (isset($jsonBody['fecha'])) ? $jsonBody['fecha'] : '';
            $requerimiento = (isset($jsonBody['requerimiento'])) ? $jsonBody['requerimiento'] : '';
            $escalado = (isset($jsonBody['escalado'])) ? $jsonBody['escalado'] : '';
            //$opcion = (isset($jsonBody['opcion'])) ? $jsonBody['opcion'] : '';
            //$id = (isset($jsonBody['id_registro'])) ? $jsonBody['id_registro'] : '';
//print_r($anillamador);
            $consulta = "INSERT INTO registros (anillamador, cedula, ticket, fecha, requerimiento, escalado) VALUES('$anillamador', '$cedula', '$ticket', '$fecha', '$requerimiento', '$escalado')";            
            // se prepara la consulta
            $resultado = $conexion->prepare($consulta);
            // se ejecuta el resultado
            $resultado->execute(); 
            //print_r($resultado);

            $consulta = "SELECT * FROM registros ORDER BY id_registros DESC LIMIT 1";
            $resultado = $conexion->prepare($consulta);
            $resultado->execute();
            $data=$resultado->fetchAll(PDO::FETCH_ASSOC);
 
print json_encode($data, JSON_UNESCAPED_UNICODE); //enviar el array final en formato json a JS
//print_r($data);
$conexion = NULL;

ACTUALIZACION Realice los cambios sugeridos por Wilfredo Aleman, entre a analizar que se muestra por consola y me aparecio lo siguiente, al parecer si me captura los datos desde el formulario pero parece que no se envian al crud porque este me devuelve un array vacio Resultado obtenido del console.log

Directorio de archivos creados para el proyecto

Archivos creados para el proyecto

3
  • Si te realiza las consultas del archivo PHP?, realmente llegan los datos? el 13 oct. 2022 a las 21:28
  • Si tienes un dataType: "json" debes evitar imprimir en el código PHP cualquier otra cosa que no sea el JSON final porque eso producirá un JSON inválido. Quita todos los print_r o bien pon temporalmente dataType: "html". Verifica que la ruta de crud.php es correcta con respecto a la ubicación del archivo desde el que haces la llamada Ajax. Y dinos si ves algún mensaje de error en la consola, error 404 u otro.
    – A. Cedano
    el 13 oct. 2022 a las 22:17
  • Si te hace el insert y select en el PHP, si no desde ahí esta el problema? el 14 oct. 2022 a las 16:38

2 respuestas 2

0

Para que ajax pueda tomar la data de PHP debes ponerla en un echo, cambia esta linea.

echo json_encode($data, JSON_UNESCAPED_UNICODE); //enviar el array final en formato json a JS

El Ajax debería de estar así.

$(document).ready(function() {
  $.ajax({
    //URL para enviar y recibir datos
    url: "bd/crud.php",
    type: "POST",
    dataType: "JSON",
    data: {
      anillamador: anillamador,
      cedula: cedula,
      ticket: ticket,
      fecha: fecha,
      requerimiento: requerimiento,
      escalado: escalado,
      id: id
    },
    success: function(data) {
      console.log(data); // para ver el resultado que se recibe 
      //PINTAMOS LA DATA EN EL ELEMENTO CON ID DATA DE TU HTML
      $('#data').html(data[1].ID);        
     
  });
  //nombre modal 
  $("#modalCRUD").modal("hide");
});

En este ejemplo mostramos el datos directamente por indice, solo genera un div en tu HTML con el id data, para que ahí lo pinte, ya después haces lo que necesites con la data.

<div id="data"></div>
2
  • no funciono, me sigue dando ese error el 17 oct. 2022 a las 17:15
  • Muestra el error y dale click en la linea que te indica undefined para ubicar el problema, edita tu pregunta las veces que sean necesarias. el 17 oct. 2022 a las 17:34
0

Si envias los datos en formato Json asignando la propiedad dataType: "json" no podras obtener los datos en la variable $_POST

Si nos ponemos tecnicos:

$_POST

Es un array asociativo de variables pasadas al script actual a través del método POST de HTTP cuando se emplea application/x-www-form-urlencoded o multipart/form-data como Content-Type de HTTP en la petición.

Lo cual no incluye content-type json

dicho esto: Para obtener los datos en crud.php

<?php
include_once '../../bd/conexion.php';
//include_once 'conexion.php';
$objeto = new Conexion();
$conexion = $objeto->Conectar();

//true para array asociativo , vacio para objeto
$jsonBody = json_decode(file_get_contents('php://input'),true)

Luego sustituye todo donde diga $_POST por $jsonBody o el nombre de la variable que asignes.

**Edit

Vamos a modificar le codigo de envio

$("#formPersonas").submit(function(e){       
    e.preventDefault();  
      let datos ={
        "anillamador" :$.trim($("#anillamador").val()),
        "cedula": $.trim($("#cedula").val()),
        "ticket" : $.trim($("#ticket").val()),
        "fecha" : $.trim($("#fecha").val()),
        "requerimiento": $.trim($("#requerimiento").val()),
        "escalado":$.trim($("#escalado").val())
      }

      $.ajax({ 
          //URL para enviar y recibir datos
          url: "bd/crud.php",
          type: "POST",
          dataType: "json",
          data: JSON.stringify(datos),
          success: function(data){ 
             // para ver el resultado que se recibe 
              console.log(data);
          }        
      }); 

  });    
    

El JSON.stringify() método convierte un valor de JavaScript en una cadena JSON,

en crud.php deja solo este codigo (para ver que te responde)

<?php
$jsonBody = json_decode(file_get_contents('php://input'),true);
var_dump($jsonBody);
die();
?>
2
  • realice las correcciones sugeridas pero sigue dando el mismo error, el array que viene del crud sigue estando vacio el 17 oct. 2022 a las 17:16
  • @DaniloJCalvachi he modificado la respuesta
    – Aleman
    el 19 oct. 2022 a las 17:56

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.