entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

enviar peticiones al servidor con ajax con el metodo get (formulario)

<form>

 <input type="text" name="nickname" id="nick">
 <button onclick="buscar()">search</button>
 </form>

 <div id="seccion-datos"></div>

 <script type="text/javascript">
 function buscar(){
  console.log("text");
    seccionDatos = document.getElementById('seccion-datos');
    ajax = new XMLHttpRequest();
    nick = document.getElementById("nick").value;

    ajax.open("get", "test.php?=nick", true);
    ajax.onreadystatechange= function(){
      if(ajax.readyState == 4 && ajax.status == 200){
        texto = ajax.responseText;
        seccionDatos.innerHTML = texto;
      }
    }
  }

 </script>
<?php
$dato_recibido = $_GET['nick'];
echo $dato_recibido;
?>

no devuelve ningun resultado

Leonardo-Tadei comentado Mar 20

Cuál es la pregunta?
Qué es lo que no te anda?
Por qué estás usando este código JS que no funciona en vez de usar el que te armé hace 2 preguntas atrás, que sí funcionaba?

Mencionás dos cosas distintas que no entendés qué son respecto a ciertos parámetros de función, que no parecen ser la pregunta en sí. Creá una pregunta específica para esas 2 dudas.

steven comentado Mar 20

la pregunta en si es como enviar una consulta al servidor desde ajax, quiero hacer algo parecido a un formulario es decir despues que lo envio recuperar los datos desde el servidor, esto es una funcion distinta de mi apliacion, hasta ahora tengo listo el buscador y me falta solo esto osea mostar todos el contenido de mi tabla sin llamar a mi base de datos

1 Respuesta

2votos

Leonardo-Tadei Puntos211470

Hola @steven,

la forma más simple de enviar una consulta al servidor vía AJAX es enviándola por GET el en URL de la petición.

Si partís de este código de una pregunta tuya anterior en la que estás estableciendo una conexión asíncrona con el servidor, trendrías que modificarle lo siguiente:

...
ajax.open("get", "recibir.php?item="+item, true);
...

en dónde la variable JS item contiene el ID del item al que querés acceder.

La forma de conseguir el valor del ID del item depende del HTML en concreto en dónde se encuentre: si es un INPUT será el value, si es un DIV será el innerHTML, o podría ser un atributo data- personalizado, etc.

Del lado del script PHP, el valor llega por GET y se lee cómo cualquier otro:

<?php
$id = $_GET['item'];
// El resto del código
...

Fijate que es imposible hacer esto sin llamar a la base de datos como sugerís: la diferencia es que la consulta a la base de datos la hace un script distinto del que genera la pantalla que estás viendo.

Saludos cordiales!

steven comentado Mar 21

@Leonardo-Tadei acabo de editar la pregunta ahora son dos problemas distintos, en la otra pregunta uso la tecnica del event delegacion para evitar de poner un listener a cada elemento, es suficiente que lo tenga el elemento padre, los hijos lo heredan por eso puedo visualizar en consola el elemento que pulso.

steven comentado Mar 21

que extraño que no se deba pasar nigun parametro dentro la consulta, sin embargo me sige mostrando el mismo error, undefined index consulta, no entendi bien el error si ya tengo concatenado con el caracter ? mi variable consulta, cual seria el error

steven comentado Mar 21

@Leonardo-Tadei cada vez que pulso en uno de mis elementos de mi lista obtengo en consola el valor de ese elemento por ej, si pulso elemento1 obtengo en mi consola elemento1, si pulso elemento2 obtengo elemento2, el event listener lo lleva solo el padre los demas lo heredan esto me ahorra mucho codigo, sin embargo todavia no puedo pasar ese valor a mi script php, te paso el codigo actualizado


    <ul id="items-links">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>

 <div id="seccion-datos"></div>

 <script type="text/javascript">

    ajax = new XMLHttpRequest();

    links = document.getElementById("items-links");
    links.addEventListener("click", function(e){
        console.log(e.target.innerText);
        consulta = e.target.innerText;

        ajax.open("get", "sistema.php?=consulta", true);
        ajax.setRequestHeader("contentType", "application/x-www-form-urlencoded");

        ajax.send();

        ajax.onreadystatechange=function() {  
         if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          seccionDatos.innerHTML= texto;

          } 
       }
    }, false)

seccionDatos = document.getElementById('seccion-datos');

 </script>
<?php 
$peticion = $_GET['consulta'];

echo $peticion;

output
indefined index consulta

steven comentado Mar 21

muchas gracias maestro, no pensaba que fuese necesario concatenar una variable con otra variable, despues de probarlo me salio funcionando, ahora solo me falta probar con el metodo post

Leonardo-Tadei comentado Mar 23

No estás concatenando una variable a otra variable, sino una constante string con la primer parte del URL a una variable, que es en dónde está el valor a enviar.

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta