0

tengo el siguiente problema y necesito que me guíen un poco, tengo mi información almacenada en el servidor y necesito retornarla a un formulario y llenar una tabla, el tema es que no entiendo bien como devolver esa información y cómo realizar el ciclo para llenar la tabla, no sé si me explico. Adjunto el javascript:

Aclaración: La información también debió ser enviada a una base de datos antes, por eso hice el código respectivo

let envio = 
    "tipoIde="+tipoIdentificacion.value+
    "&ide="+ide+
    "&nombre="+nombre+
    "&apellidos="+apellidos+
    "&rd_sexo="+valorRadio+
    "&fechaNacimiento="+fechaNacimiento+
    "&lugarNac="+lugarNac+
    "&nacionalidad="+nacionalidad+
    "&estadoC="+estadoC.value+
    "&tel="+tel+
    "&email="+email+
    "&domicilio="+domicilio+
    "&provincia="+provincia.value;
    


    //encio de datos desde js a php con ajax
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.open("POST","procesar.php");
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(envio);
    xmlhttp.onload = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            if(xmlhttp.responseText == 1){
                alert("Registro ingresado");
                let contenido= document.getElementById("content");
                contenido.innerHTML=envio;
            }else{
                alert("Registro no ingresado");
            }
        }
        }

//información de tabla en otro archivo:
<table class="table table-bordered mb-0" id="tabla">
                            <thead>
                                <tr>
                                    <th>Tipo Identificaci&oacute;n</th>
                                    <th>N&uacute;mero de Identificaci&oacute;n</th>
                                    <th>Nombre</th>
                                    <th>Sexo</th>
                                    <th>Fecha Nacimiento</th>
                                    <th>Lugar Nacimiento</th>
                                    <th>Nacionalidad</th>
                                    <th>Estado</th>
                                    <th>Tel&eacute;fono</th>
                                    <th>Email</th>
                                    <th>Domicilio</th>  
                                    <th>Provincia</th>
                                    <th>Opciones</th>                                                                                                                                           
                                </tr>
                            </thead>
                            <tbody id="content">

                            </tbody>
                        </table>

cuando intento imprimir el contenido en el html me escribe esto fuera de la tabla: tipoIde=1&ide=32132&nombre=pablo&apellidos=salazar&rd_sexo=M&fechaNacimiento=2023-03-08&lugarNac=cartago&nacionalidad=costarricense&estadoC=2&tel=86789878&email=nicaidsa@gmail.com&domicilio=sanremo&provincia=5

Los cuales corresponden a lo enviado al formulario

mi php de envío a base de datos es este es este:

require_once("conexion.php");

//switch tipo de identificacion
$tipoIdentificacion = '';
switch ($_REQUEST["tipoIde"]) {
    case 1:
        $tipoIdentificacion = 'Nacional';
        break;
    case 2:
        $tipoIdentificacion = 'Extranjero';
        break;                      
}


//switch estado civil
$estadoC ='';
switch ($_REQUEST["estadoC"]) {
    case 1:
        $estadoC = 'Soltero';
        break;
    case 2:
        $estadoC = 'Casado';
        break;  
    case 3:
        $estadoC = 'Divorciado';
        break;
    case 4:
        $estadoC = 'Separaci&oacute;n en proceso judicial';
        break;
    case 5:
        $estadoC = 'Viudo';
        break;
    case 6:
        $estadoC = 'Concubinato';
        break;                               
}


//switch provincias
$provincia ='';
switch ($_REQUEST["provincia"]) {
    case 1:
        $provincia = 'San Jose';
        break;
    case 2:
        $provincia = 'Alajuela';
        break;  
    case 3:
        $provincia = 'Cartago';
        break;
    case 4:
        $provincia = 'Heredia';
        break;
    case 5:
        $provincia = 'Puntarenas';
        break;
    case 6:
        $provincia = 'Guanacaste';
        break;    
    case 7:
        $provincia = 'Limon';
        break;                            
}


$sql = "INSERT INTO curriculum (TIP_IDENTIFICACION,NUM_IDENTIFICACION,DSC_NOMBRE,DSC_APELLIDOS,IND_SEXO,FEC_NACIMIENTO,DSC_LUGAR,DSC_NACIONALIDAD,IND_ESTADO,DSC_TELEFONO,DSC_EMAIL,DSC_DOMICILIO,IND_PROVINCIA)
    VALUES(
    '".$_REQUEST["tipoIde"]."',
    ".$_REQUEST["ide"].",
    '".$_REQUEST["nombre"]."', 
    '".$_REQUEST["apellidos"]."',
    '".$_REQUEST["rd_sexo"]."',
    '".$_REQUEST["fechaNacimiento"]."', 
    '".$_REQUEST["lugarNac"]."',
    '".$_REQUEST["nacionalidad"]."',
    '".$_REQUEST["estadoC"]."',
    ".$_REQUEST["tel"].",
    '".$_REQUEST["email"]."' ,
    '".$_REQUEST["domicilio"]."' ,
    '".$_REQUEST["provincia"]."'
    )";


try{
    $result = mysqli_query($conexion, $sql);
    echo 1;
}catch(mysqli_sql_exception $e){
    echo 2;
}
?>

Y mi archivo php con la consulta select es este:

<?php
require_once("conexion.php"); 

$columns=['TIP_IDENTIFICACION', 'NUM_IDENTIFICACION', 'DSC_NOMBRE', 'DSC_APELLIDOS', 'IND_SEXO', 'FEC_NACIMIENTO', 'DSC_LUGAR', 'DSC_NACIONALIDAD', 'IND_ESTADO', 'DSC_TELEFONO', 'DSC_EMAIL', 'DSC_DOMICILIO', 'IND_PROVINCIA'];
$table = "curriculum";

$sql ="SELECT  ". implode(",", $columns) . "
FROM $table";
$resultado = mysqli_query($conexion, $sql);
$num_rows = $resultado->num_rows;

$html='';

if($num_rows > 0){
while($row = $resultado->fetch_assoc()){
    $html.='<tr>';
    $html.='<td>'.$row['TIP_IDENTIFICACION'].'</td>';
    $html.='<td>'.$row['NUM_IDENTIFICACION'].'</td>';
    $html.='<td>'.$row['DSC_NOMBRE'].'</td>';
    $html.='<td>'.$row['DSC_APELLIDOS'].'</td>';
    $html.='<td>'.$row['IND_SEXO'].'</td>';
    $html.='<td>'.$row['FEC_NACIMIENTO'].'</td>';
    $html.='<td>'.$row['DSC_LUGAR'].'</td>';
    $html.='<td>'.$row['DSC_NACIONALIDAD'].'</td>';
    $html.='<td>'.$row['IND_ESTADO'].'</td>';
    $html.='<td>'.$row['DSC_TELEFONO'].'</td>';
    $html.='<td>'.$row['DSC_EMAIL'].'</td>';
    $html.='<td>'.$row['DSC_DOMICILIO'].'</td>';
    $html.='<td>'.$row['IND_PROVINCIA'].'</td>';
    $html.='<td><a href=""> Eliminar </td>';
    $html.='<tr>';
}
}else{
    $html.='<tr>';
    $html.='<td colspan="7">Sin resultados</td>';
    $html.='</tr>';
}
echo json_encode($html, JSON_UNESCAPED_UNICODE);

?>

Estos hacen correctamente la función, ya sea de insertar o de seleccionar, el tema es que la información del select necesito colocarla en una tabla html.

esta imprime sentencias de esta forma:

</td>1</td>32132</td>sebas</td>salazar</td>M</td>2023-03-07</td>cartago</td>costarricense</td>3</td>86789878</td>nicaidsa@gmail.com</td>sanremo</td>4</td> Eliminar </td>"

6
  • Como es que te devuelve los datos?, agrégalo a tu pregunta... el 17 mar. a las 17:16
  • @AntonioGalicia no termino de entender a qué te refieres, amigo, puedes explicarme tu pregunta? Además agregué un par de datos al código el 17 mar. a las 17:38
  • 1
    En las preguntas es importante agregar detalle sobre los formatos de entrada y de salida. En tu caso el código que muestras está incompleto. Se intuye que la variable "envio" tiene los parámetros que envías a procesar.php pero eso no se ve en tu código. Y no mencionas nada sobre la respuesta de procesar.php ¿qué responde? ¿en que formato? Dependiendo de esta respuesta es que podemos guiarte. Por ejemplo, si responde un objeto JSON o XML, necesitas procesar esos datos y generar el HTML correspondiente. Si te responde HTML podrías imprimirlo directo como lo haces en tu código.
    – markoan
    el 17 mar. a las 18:05
  • Recién añadí el php donde envío los datos, espero con eso baste, soy nuevo en esto y no me entero bien de qué cosas son necesarias. Una vez procesado el php se hace envío a la base de datos el 17 mar. a las 18:16
  • Me refiero exactamente a todo lo que menciona @markoan. Por otro lado si lo que quieres es mostrar la información que se ha insertado en una tabla, esta debería de ser con un select, con esto se confirma que tu información se encuentra en la BD, de nada nos sirve el script del insert que nos estas mostrando. el 17 mar. a las 18:39

1 respuesta 1

0

Como explicas, tu página envía los datos del formulario para guardar en la base de datos y responde con "1" cuando lo logra guardar y "2" si hay un error. Finalmente quieres agregar a la tabla los datos enviados cuando se guardaron con éxito.

Para este necesitas armar los elementos HTML usando los datos que tienes. Puedes hacerlo con algo similar a este código (por cierto, moví onload antes del send para garantizar que esté definido al llamar el método asíncrono).

      <script lang="javascript">

        let envio = "tipoIde="+tipoIdentificacion.value+
                  "&ide="+ide+
                  "&nombre="+nombre+
                  "&apellidos="+apellidos+
                  "&rd_sexo="+valorRadio+
                  "&fechaNacimiento="+fechaNacimiento+
                  "&lugarNac="+lugarNac+
                  "&nacionalidad="+nacionalidad+
                  "&estadoC="+estadoC.value+
                  "&tel="+tel+
                  "&email="+email+
                  "&domicilio="+domicilio+
                  "&provincia="+provincia.value;

          // Envio de datos desde js a php con ajax
          var xmlhttp = new XMLHttpRequest();

          xmlhttp.open("POST","procesar.php");
          xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

          xmlhttp.onload = function() {
              if(xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status === 200) {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                  if(xmlhttp.responseText == 1){
                    alert("Registro ingresado");
                    // Obtener elemento padre
                    let contenido = document.getElementById("content");
                    // Generar HTML
                    let row = `<tr>
                                <th>${tipoIdentificacion.value}</th>
                                <th>${ide}</th>
                                <th>${nombre}</th>
                                <th>${apellidos}</th>
                                <th>${valorRadio}</th>
                                <th>${fechaNacimiento}</th>
                                <th>${lugarNac}</th>
                                <th>${nacionalidad}</th>
                                <th>${estadoC.value}</th>
                                <th>${tel}</th>
                                <th>${email}</th>  
                                <th>${domicilio}</th>
                                <th>${provincia.value}</th></tr>`

                    // Asignar contenido HTML plano al elemento
                    contenido.innerHTML=row;
                  }else{
                    alert("Registro no ingresado");
                  }
                }
              }
          };

          xmlhttp.send(envio);
      </script>

      <table class="table table-bordered mb-0" id="tabla">
        <thead>
          <tr>
            <th>Tipo Identificaci&oacute;n</th>
            <th>N&uacute;mero de Identificaci&oacute;n</th>
            <th>Nombre</th>
            <th>Sexo</th>
            <th>Fecha Nacimiento</th>
            <th>Lugar Nacimiento</th>
            <th>Nacionalidad</th>
            <th>Estado</th>
            <th>Tel&eacute;fono</th>
            <th>Email</th>
            <th>Domicilio</th>  
            <th>Provincia</th>
            <th>Opciones</th>                                                                                                                                           
          </tr>
        </thead>
        <tbody id="content"></tbody>
      </table>

Nota: Considera que usar innerHTML tiene riesgos de seguridad. Normalmente se recomienda usar createElement aunque hace el código más complejo.

2
  • Hola y gracias nuevamente, amigo, tu código me funcionó, solo que me imprime los datos fuera de la tabla, además de recargar en una página nueva que solo tiene la tabla, sabés por qué puede ocurrir esto? gracias el 17 mar. a las 19:49
  • @AntonioGalicia vi que editaste tu código, pero no me aparece, no sé si puedes volver a escribirlo, que pena molestarte el 17 mar. a las 20:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.