0

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 = App\User::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."'>");        
        }

?>
2
  • Todos tus inputs tienen el mismo nombre name="ip", al procesar el formulario se envía solamente uno. Cambia el nombre a name="ip[]" y en PHP manéjalo como arreglo.
    – Triby
    el 24 jul. 2020 a las 3:39
  • @Triby hola tribi, perdón la molestia, pero me podrías mostrar como hacerlo, he intentado hacerlo como me decías pero no se como enviar el name="ip[]" como arreglo y como capturarlo en javascript
    – proteus8
    el 25 jul. 2020 a las 1:21

1 respuesta 1

0

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.

6
  • muchas gracias por tu ayuda, estoy viendo el código y hay muchas cosas que no sabia y he tratado de ir entendiendo, lo ejecute paso a paso como decías,para ir viendo que hacia, pero me da un error en el fetch si lo veo por consola me muestra "failed to fetch" y no se que puede ser.
    – proteus8
    el 25 jul. 2020 a las 23:04
  • Acabo de modificar la respuesta para tratar de ver si el servidor devuelve algo y la respuesta es adecuada o no.
    – Triby
    el 26 jul. 2020 a las 2:54
  • Triby esto es lo que muestra el servidor al ajecutar el codigo: NetworkError when attempting to fetch resource. 2 ping.js:45:15 .catch(function(error) { // Fallo la peticion console.log(error.message); respuesta.innerHTML = '(Error en peticion)'; }); y nuevamente gracias por tu ayuda.
    – proteus8
    el 26 jul. 2020 a las 15:56
  • @proteus8, actualicé la respuesta, había olvidado .preventDefault() en el evento submit
    – Triby
    el 27 jul. 2020 a las 14:23
  • funciono perfecto!!! de verdad muchísimas gracias por tu ayuda y buena voluntad.
    – proteus8
    el 27 jul. 2020 a las 20:36

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.