TransWikia.com

Pasar datos de php a ajax

Stack Overflow en español Asked on December 22, 2021

Espero me puedan ayudar con un problema que no se como resolver. Tengo unos datos Ip que rescato de una base de datos y por cada ip que tenga asociada una dirección las voy listando en una tabla, y luego tomo esa ip y realizo un ping, esto me resulta sin problemas, pero solo con la primera que encuentra, no se como hacer que ejecute mi código ajax por cada ip del listado. Estos son mis códigos.

Pagina desde donde llamo la función ajax:

@extends('layouts.app2')
@section('contenido')
@php
              set_time_limit(0); 
              //$users = AppUser::all(); 
              foreach ($enlaces as $nombre)
              {
                  $ssee=$nombre->Sse_nombre;
                  $tipo=$nombre->Sse_Tpi_id;
                  if($tipo == '1')
                  {
                    $titulo='SSEE';
                  }
                  else
                  {
                    $titulo='Central';
                  }
              }
@endphp
      <div class='container'>
        
        <h1>Detalle Enlaces {{ $titulo}} {{$ssee}}</h1> 
        <form id='formulario'>
        <div class='row md-2'>
                   <button class='btn-secondary btn-default row mt-5' type='submit' id='analizar' name='analizar'>Analizar</button>
      
          </div>
          <div class='row'>
              
                <table class='table  table-format table-hover'>
                  <thead>
                    <tr>
                      <th scope='col'>#Id</th>
                      <th scope='col'>IP</th>
                      <th scope='col'>Equipo</th>
                      <th scope='col'>Marca</th>
                      <th scope='col'>Modelo</th>
                      <th scope='col'>Tipo Enlace</th>
                      <th scope='col'>Prioridad</th>
                      <th scope='col'>ISP</th>
                      <th scope='col'>Cod.Servicio</th>
                      <th scope='col'>N° Contacto</th>
                      <th scope='col'>Correo Contacto</th>
                      <th scope='col'>ESTADO</th>
                    </tr>
                  </thead>
                  <tbody>
                 @foreach ($enlaces as $enla)

                  
                     <tr>
                      <td>{{ $enla->Enl_id}}</td>
                      <td>{{ $enla->Enl_num_ip}}</td>
                      <td>{{ $enla->Tpq_nombre}}</td>
                      <td>{{ $enla->Mar_nombre}}</td>
                      <td>{{ $enla->Mod_nombre}}</td>
                      <td>{{ $enla->Tpe_nombre}}</td>
                      <td>{{ $enla->Pri_nombre}}</td>
                      <td>{{ $enla->isp_nombre}}</td>
                      <td>{{ $enla->Enl_codigo_serv}}</td>
                      <td>{{ $enla->isp_telefono}}</td>
                      <td>{{ $enla->isp_correo}}</td>

                      <td><div id='estado'><div id='respuesta'></div></td>
                      <input id='prueba1' type='hidden' name='ip' value='{{ $enla->Enl_num_ip}}'>
                          </tr>
                   
                @endforeach

                  </form>
                  <script src="{{ asset('js/app/ping.js')}}"></script>
                  </tbody>
              </table>
         </div>
     </div>          
@endsection

Este es mi código js:

 var formulario =document.getElementById('formulario');
var respuesta =document.getElementById('respuesta');

formulario.addEventListener('submit',function(e){
  e.preventDefault();
console.log('pinchaste el boton')
var datos = new FormData(formulario);
console.log(datos.get('ip'))


fetch('http://localhost/scadabita2/resources/views/app/post.php',{
  method:'POST',
  body:datos
})
.then( res => res.json())
.then( data => {
  console.log(data)
  if(data === 'error')
  {
    respuesta.innerHTML=`<div>
   error
    </di>`
  }else{
    respuesta.innerHTML=`<div>
    ${data}
    </di>`
  }
  
})
})

Y este es mi código php donde realizo los ping:

 <?php 
$data=$_POST['ip'];
 $PING1='ping '.$data.' -n 4';
   $res=shell_exec($PING1);
   $var=strstr($res, '(100% perdidos)');
   $findme='recibidos = 0';
   $pos = strpos($res, $findme);

   if($pos == false) 
   {
       $findme='recibidos = 4';
        $pos = strpos($res, $findme);

            if($pos == false)
            {
                $RESULTADO="OKNOK.jpg";
                echo json_encode("<img src='../img/".$RESULTADO."'>");
            }
            else 
            {
                $RESULTADO="Ok.jpg";
                echo json_encode("<img src='../img/".$RESULTADO."'>");
            }
            
    }else
        {
        $RESULTADO="NOk.jpg";  
            echo json_encode("<img src='../img/".$RESULTADO."'>");        
        }

?>

One Answer

Debes corregir algunas cosas como:

  • Eliminar el div id="estado", no le veo utilidad... o cerrarlo y cambiar ID por clase
  • Evitar repetir IDs, tanto para div como para input
    • Cambia ID del div por clase
    • Elimina ID del input y agrega corchetes al nombre
  • Coloca el input dentro de la misma celda de respuesta para tener un HTML válido
            <td>
                <div class='respuesta'></div>
                <input type='hidden' name='ip[]' value='{{ $enla->Enl_num_ip }}'>
            </td>

En javascript los cambios son mayores, porque vas a mostrar los resultados de cada IP en respuesta y es necesario enviar una petición por IP, de lo contrario, los resultados llegarán hasta que se procesen todas.

Hay que recorrer todos los campos y ejecutar la petición AJAX en una función aparte, evitando el uso de funciones anónimas dentro del ciclo.

// Asegurar que se cargó el DOM antes de comenzar
document.addEventListener('DOMContentLoaded', function() {
    // Asignar directamente el evento submit al formulario, no necesitas tenerlo en variable
    document.querySelector('#formulario').addEventListener('submit', function(e) {
        // Evitar comportamiento por defecto del formulario
        e.preventDefault();
        // Obtener los campos por nombre, el circunflejo ^ es para indicar que "inicia con"
        let ips = document.querySelectorAll('[name^="ip"]');
        // Recorrer todas las IP y ejecutar la petición AJAX
        ips.forEach(ip => procesarIps(ip));
    });
});

function procesarIps(ip) {
    // Crear formData y agregar IP actual
    let datos = new FormData();
    datos.append('ip', ip.value);
    
    // Seleccionar DIV de respuesta, llegando por TD padre
    let respuesta = ip.closest('td').querySelector('.respuesta');
    
    // Ejecutar petición AJAX
    fetch('http://localhost/scadabita2/resources/views/app/post.php',{
        method:'POST',
        body:datos
    })
    .then(res => {
         // Ver la respuesta del servidor
         console.log(res);
         // Fue una respuesta adecuada?
         if(res.ok) {
             return res.json();
         }
         // Lanzar mensaje de error
         throw 'Error en respuesta AJAX';
    })
    .then(data => {
        // Debes recibir un JSON con propiedad img... o algo falló
        if(data.img) {
            respuesta.innerHTML = data.img;
        } else {
            respuesta.innerHTML = '(Error en respuesta)';
        }
    })
    .catch(function(error) {
        // ¿Falló la petición?
        console.log(error.message);
        respuesta.innerHTML = '(Error en petición)';
    });
}

En PHP solo hay que hacer unas modificaciones para devolver un JSON válido:

<?php 
$data=$_POST['ip'];
$PING1='ping '.$data.' -n 4';
$res=shell_exec($PING1);
$var=strstr($res, '(100% perdidos)');
$findme='recibidos = 0';
$pos = strpos($res, $findme);

if($pos == false) {
    $findme='recibidos = 4';
    $pos = strpos($res, $findme);
    if($pos == false) {
        $RESULTADO="OKNOK.jpg";
    } else {
        $RESULTADO="Ok.jpg";
    }
} else {
    $RESULTADO="NOk.jpg";  
}
// Enviar un JSON con elemento img y la imagen correspondiente
echo json_encode(['img' => "<img src="../img/$RESULTADO">"]);        

Se puede enviar solo el nombre de la imagen y crear el elemento adecuado en javascript, llévatelo de tarea.

Muy importante: No copies y pegues este código porque no ha sido probado, trata de entenderlo primero, ver qué hace cada cosa e irlo aplicando en tu proyecto por partes, revisando y depurando.

Answered by Triby on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP