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."'>");
}
?>
Debes corregir algunas cosas como:
id="estado"
, no le veo utilidad... o cerrarlo y cambiar ID por clase <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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP