Foros del Web » Programando para Internet » Jquery »

Problemas al traer datos del servidor con jquery ajax

Estas en el tema de Problemas al traer datos del servidor con jquery ajax en el foro de Jquery en Foros del Web. Hola ,soy nuevo en el foro espero me traten bien jeje. Bueno tengo 2 problemitas, pero pondre solo 1 , luego pondre el otro. Tengo ...
  #1 (permalink)  
Antiguo 09/07/2015, 23:19
 
Fecha de Ingreso: julio-2015
Ubicación: Lima
Mensajes: 5
Antigüedad: 6 años, 4 meses
Puntos: 0
Busqueda Problemas al traer datos del servidor con jquery ajax

Hola ,soy nuevo en el foro espero me traten bien jeje.
Bueno tengo 2 problemitas, pero pondre solo 1 , luego pondre el otro.
Tengo una pagina donde llamo datos del servidor mediante ajax (dejo en claro que llevo algunos dias aprendiendo nada mas) pero al traerlo solo imprime las <tr> y <td> q contienen las variables pero estas que son las mas importantes, no las imprime.
Aqui les pongo el codigo para que les sea mas claro.

index.html

<html>
<body>
<section id="cajaformulario">
<form name="formulario" id="formulario" method="post" action="PHP/cotiprevia1.php">
<select id="procesador" name="procesador">
<option>
Procesador Intel Corei5
</option>
<option>
Procesador Intel Corei3
</option>
</select>
<p><input type="submit" name="boton" id="boton" value="Aceptar"></p>
</form>
</section>
<section id="caja"></section>
</body>
</html>

ajax.js

function iniciar(){
var procesador=document.getElementByClass('procesador' );
var proc=document.getElementById('procesador');
var seleccion=document.getElementById('procesador');
seleccion.addEventListener('change', enviar, false);
} function enviar(){
var datos=new FormData();
datos.append('procesador',proc);
var url="PHP/cotiprevia1.php";
var solicitud=new XMLHttpRequest();
solicitud.addEventListener('load', mostrar, false);
solicitud.open("POST", url, true);
solicitud.send(datos);
} function mostrar(e){
procesador.innerHTML=e.target.responseText;
} window.addEventListener('load', iniciar, false);

ajax.php

<?php
//Conexion y consulta
include 'conexion.php';

//variables traidas por POST
$row = "";
$proc = $_REQUEST['procesador'];
if ($proc == '[Seleccione Procesador]') {
echo '<table><tr><td class="cero">.1</td><td class="uno">*No a seleccionado ningun procesador.</td><td class="dos">----</td><td class="tres"></td></table>';
}else{
if($proc == NULL){
echo '<table><tr><td class="cero">.1</td><td class="uno"></td><td class="dos"></td><td class="tres"></td></table>';
}else{
$consulta = mysqli_query($conexion,"SELECT nombre,precio,descripcion,compatibilidad FROM productos WHERE nombre = '$proc'");
$row = mysqli_fetch_array($consulta);
$re = $row['compatibilidad'];
echo '<table border="1"><tr><td class="cero">.1</td><td class="uno">'.$row['nombre'].'</td><td class="dos"></td><td class="tres">'.$re.'</td></table>';
}
}
?>
  #2 (permalink)  
Antiguo 10/07/2015, 03:02
 
Fecha de Ingreso: febrero-2013
Mensajes: 115
Antigüedad: 8 años, 9 meses
Puntos: 5
Respuesta: Problemas al traer datos del servidor con jquery ajax

amigo, te voy a tratar bien... jejeje!!! no estas utilizando jquery porque las funciones dde jquery se especifican con $... el metodo ajax de jquery es $.ajax y tu estas usando ajax puro de javascript, digo puro de java script ya que jquery tambien es de javascript... creo qeu debes postear en javascript supongo...
__________________
http://tutorialesdelweb.blogspot.com/TutorialesWeb(principiantes)
  #3 (permalink)  
Antiguo 10/07/2015, 08:55
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.538
Antigüedad: 10 años
Puntos: 968
Respuesta: Problemas al traer datos del servidor con jquery ajax

Bienvenido a FDW.

Noto varios errores. Debo de suponer que el código HTML que muestras no está completo pues no veo en dónde incluyes al archivo "ajax.js". Por otro lado, veo que intentas trabajar con el texto de las opciones cuando lo correcto es hacerlo con sus valores. Para ello, solo debes de especificar un valor para cada opción mediante el atributo value.

Código HTML:
Ver original
  1.     <option value = "1">Opción 1</option>
  2.     <option value = "2">Opción 2</option>
  3.     <option value = "3">Opción 3</option>

Cuando seleccionas una opción, el <select> toma su valor.

En cuanto al código JavaScript, veo que haces esto:

Código Javascript:
Ver original
  1. var procesador=document.getElementByClass('procesador' );
  2. var proc=document.getElementById('procesador');
  3. var seleccion=document.getElementById('procesador');

Algo que no tiene mucho sentido ya que, en las dos últimas líneas, tomas al mismo elemento, mientras que en la primera, ocurrirá un error ya que no existe el método .getElementByClass() sino el .getElementsByClass() el cual devuelve una lista de nodos con los elementos que posean la clase especificada. Si vas a tomar al <select>, hazlo solo una vez y trabaja con la variable a la que sea asignado.

No es necesario que uses un FormData, basta con que en el método .send() construyas la cadena de consulta:

Código Javascript:
Ver original
  1. solicitud.send(proc.name + "=" + proc.value);

También sería bueno que en la función "mostrar", compruebes que la respuesta del servidor fue exitosa.

Código Javascript:
Ver original
  1. if (this.status == 200){
  2.     //Do stuff
  3. }

Si el envío del dato seleccionado en el <select> se va a realizar al seleccionar una opción, no hace falta un botón de envío.

Realiza los cambios que te he señalado y prueba.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #4 (permalink)  
Antiguo 10/07/2015, 15:50
 
Fecha de Ingreso: julio-2015
Ubicación: Lima
Mensajes: 5
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Problemas al traer datos del servidor con jquery ajax

Si la verdad es que ayer tenia un sueño mortal, asi que me confundi en escribir el jquery y puse algo de java. En realidad este es el html5, el jquery, y el PHP al que me referia en un incio...

HTML5:
<html>
<head>
<title>Ajax Level 2</title>
<link rel="stylesheet" href="css/ajax.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<section id="cajaformulario">
<form name="formulario" id="formulario" method="post" action="PHP/cotiprevia1.php">
<select id="procesador" name="procesador">
<option>
[Seleccione Procesador]
</option>
<option>
Procesador Intel Corei5
</option>
<option>
Procesador Intel Corei3
</option>
<option>
Procesador AMD FX 470
</option>
</select>
<p><input type="submit" name="boton" id="boton" value="Aceptar"></p>
</form>
</section>
<section id="caja"></section>
</body>
</html>

JQUERY:
$(document).ready(function(){

$('#procesador').change(function(){
var url = "PHP/cotiprevia1.php";
var parte = $("#procesador option:selected").text();
$.ajax({
type: "get",
url: url,
dataType:"html",
data: 'procesador='+parte,
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function(result){
$("#caja").html(result);
}
});
});
});

PHP:
<?php
//Conexion y consulta
include 'conexion.php';

//variables traidas por POST
$row = "";
$proc = "";
$proc = $_REQUEST['procesador'];
if ($proc == '[Seleccione Procesador]') {
echo '<table><tr><td class="cero">.1</td><td class="uno">*No a seleccionado ningun procesador.</td><td class="dos">----</td><td class="tres"></td></table>';
}else{
if($proc == NULL){
echo '<table><tr><td class="cero">.1</td><td class="uno"></td><td class="dos"></td><td class="tres"></td></table>';
}else{
$consulta = mysqli_query($conexion,"SELECT nombre,precio,descripcion,compatibilidad FROM productos WHERE nombre = '$proc'");
$row = mysqli_fetch_array($consulta);
echo '<table><tr><td class="cero">.1</td><td class="uno">'.$row['nombre'].'</td><td class="dos"></td><td class="tres">'.$row['compatibilidad'].'</td></table>';
}
}
?>
Lo que intento es traer datos del servidor, los cuales son dos: $row['nombre'] & $row['compatibilidad'] y saben que? SII ME FUNCIONA, y hasta lo imprime en el div #caja.
Mi problema es el siguiente:
Cuando intento hacer funcionar este procedimiento en una web que no hice yo, que tiene otros estilos, con HTML adicional y ademas otros scripts (incluso en mi desesperacion e intentado deshabilitando todos los scripts y dejando solo el script de jquery y el que acabo de escribir arriba), no me imprime las variables del PHP a pesar de que cuando ejecuto el PHP sin jquery, osea directamente SI FUNCIONA.
Debo decir tambien que los <option> de la otra pagina las traigo con PHP a diferencia del molde basico que hice arriba.
Algo curioso es que cuando le doy un alert ( success: function (result){alert('procesador='+result);} ) es obvio que realiza la consulta e imprime los resultados pero solo imprime las <table><tr><td></td........</table> pero las variables cada de nada.
Porfas alguna idea ya que esto me esta volviendo loco.... :(
Por cierto esta es la pagina www.wilsonfasttecnology.pe.hu/index1.php

Última edición por mike20xp; 10/07/2015 a las 16:11
  #5 (permalink)  
Antiguo 10/07/2015, 16:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.538
Antigüedad: 10 años
Puntos: 968
Respuesta: Problemas al traer datos del servidor con jquery ajax

Revisa en la consola del navegador el resultado que obtienes. En Google Chrome, pulsa la tecla F12 y del panel que se desplegará, elige "Network". Ejecuta el script y verás que aparecerá el nombre del archivo PHP en el lado izquierdo del panel; dale clic y a la derecha elige "Response". Ahí verás el resultado que devuelve dicho archivo.

También puedes aprovechar para imprimir el valor recibido (en el archivo PHP, así sabrás qué está recibiendo), pero antes, te sugiero realizar los cambios que te indiqué porque la manera en la que lo haces no es ni la mejor ni la más elegante, precisamente.

¡Ah! La próxima vez que publiques código por acá, por favor, utiliza el highlight respectivo.



Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 10/07/2015, 16:28
 
Fecha de Ingreso: julio-2015
Ubicación: Lima
Mensajes: 5
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Problemas al traer datos del servidor con jquery ajax

Perdon no sabia lo del highlight, ahora lo tendre presente.
En este ultimo escribi el jquery ajax, osea que ya no estoy intentandolo por javascript puro, justamente porque me confundi mucho :P.
Puedo crear otro TEMA con el codigo corregido?

Última edición por mike20xp; 10/07/2015 a las 16:34

Etiquetas: ajax-php, ajax-php-mysql, javascript+php, jquery-ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:11.