Mostrar datos con AJAX

eXtreM3 #1 Mar '12

Buenas de nuevo,

estoy realizando una consulta con php y mysql que me devuelve varios valores, en concreto 6, cada uno definido en una variable.

Mediante este código envío la información del valor sobre el que hay que realizar los cálculos:

$.ajax({ 
	type: "POST", 
	url: "consultas.php", 
	data:$("#formCalc").serialize(),
	success: function(respuesta) { 
		$('#resultado').html(respuesta);
	} 
});

En consultas.php hago la conexión con la base de datos y meto los resultados en variables. Después, en mi html soy capaz de mostrar esas variables en el div resultado, pero tengo una pregunta: es posible meter cada una de las variables dentro de un input type text de un formulario que tengo ya creado en el html? Es decir tengo 6 cuadros en blanco y quiero que cada resultado de lo que me devuelve el .php me lo meta en su correspondiente cuadro (la variable1 en el cuadro1, variable2 en el cuadro2...)

Creo que me he explicado bien... pedidme algo si no ha quedado claro

Gracias!

pd: a mi sólo se me ocurre hacerlo de manera "chapucera", poniendo el div resultado en la posición que quiera y darle un estilo a pelo desde el php (cosa que CREO que funcionaría xD)

tada #2 Mar '12

#1 Yo hice hace poco algo similar. Te falta poner el dataType, así a pelo no nos estás diciendo que es lo que devuelve tu consulta.php (salvo que son unas variables..).

Tienes varias formas, puedes hacer que el servidor te responda en formato XML o JSON y en tu función success vas poniendo cada variable en su respectivo input mediante ids por ejemplo. Para XML por ejemplo se que puedes utilizar la función find para buscar los valores de tu respuesta del servidor.

2 respuestas

EnZo #3 Mar '12

#1 Lo primero es ponerle ids a los inputs donde quieras cargar las variables. id="cuadro1" ....

Y luego lo que dice #2, recoger los datos con json.

SicKneSs #4 Mar '12

con tu permiso #1 aprovecho el post para hacer una mini consulta:

siguiendo el ejemplo de #1, cuando se retorna los valores de 'consulta.php' hay que hacerlo siempre mediante 'echo' ? creo haberlo hecho alguna vez con 'return' ....

1 saludo.

1 respuesta

EnZo #5 Mar '12

#4 Con return no imprime el texto sobre la web. Y desde javascript necesitas que se imprima para poder leerlo.

1 respuesta

SicKneSs #6 Mar '12

#5 ok, ayer me pegé una buena rayada con ese tema, intenando hacerlo con return, me parecía más lógico, xD. gracias.

eXtreM3 #7 Mar '12

#2 el tipo de dato son números, pero están formateados con la función number_format para los puntos de los miles y las comas de los decimales. Qué tipo de dato tengo que poner en el dataType? text? html? json?

Los inputs tienen cada uno su id, sí, pero me pierdo al intentar introducir los valores que me retorna el php en cada uno de ellos. Sigo investigando...

eXtreM3 #8 Mar '12

SOLUCIONADO

Al final he tirado por la solución "casera", he tenido problemas con internet toda la mañana y no tenía opción de buscar cosas que desconozco, y como era de relativa urgencia... (como siempre ¬¬) pues ale, he organizado la salida de datos que devuelve el php en divs con posiciones en el lugar deseado y cada variable en su capita.

Calculadora terminada , podeis verla en funcionamiento si quereis.

En cuanto tenga algo de tiempo me miro lo de JSON porque realmente me interesa y quiero aprender esa técnica.

Saludos :si:

1 respuesta

SicKneSs #9 Mar '12

#8 de qué forma envías la información desde el php ? en un array ?

1 respuesta

eXtreM3 #10 Mar '12

#9 con un echo. Primero guardo la info en variables y después meto en divs esas variables. Con la hoja de estilos y el html los posiciono donde quiero... no es lo más ortodoxo, pero funciona xD

DarkSoldier #11 Mar '12

Os pongo un ejemplo mio y lo explico asi por encima para ver si os puede ayudar,

Lo que hago es enviar por GET a return.php un valor (es el value de un input con id #ext):

		
function busca() {
	var ext = $("#ext").val();
	$.ajax({
		async: true,
		type: "GET",
		dataType: "json",
		url:"return.php",
		data:"ext=" + ext,
		timeout:1500,
		success:function(ret){
			info(ret);
		},
		error:function(data, tipo, e){
			var error = $("#error");
			error.html("problemon " + data + " - " + tipo + " - " + e);
		}
	});
}

el fichero busca en la bd ese valor y los resultados los voy añadiendo en un array, una vez los tengo todos los datos en un array los muestro en JSON:

if(isset($_GET['ext'])) {
	$sel = 'SELECT * FROM tabla WHERE campo = '.$_GET['ext'];
	$q = mysql_query($sel,$con);
	while($r=mysql_fetch_assoc($q)) $resultado[] = $r;
	echo json_encode($resultado);
}
else echo json_encode('Sin datos');

para recogerlos me he creado otro metodo llamado info(x) donde le paso los datos que recibo, creo una variable str donde voy añadiendo todos los datos y luego los añado en un div con id #datos

function info(datos) {
	var str = '';
	$.each(datos,function(i,v) {
		str = str + 'aqui los datos...' + v.CAMPODELARRAY;
	});
	$("#datos").html(str);
}

Mostrar datos con AJAX

Usuarios habituales

Tags