CFML e Ajax com JSON (troca de selects)

On 23 de fevereiro de 2012, in CFML, jQuery, by andersonstraube

Para este post utilizarei a clássica troca de “estado e cidade” para exemplificar o uso do jQuery para requisições ajax com CFML retornando os dados em JSON.

Segue o código html simples:


<html>
<body>

<label for="estado">Estado</label>
<select id="estado">
	<option value="0"></option>
	<option value="1">PR</option>
	<option value="2">RS</option>
	<option value="3">SC</option>
	<option value="4">SP</option>
</select>
<br>
<label for="cidade">Cidade</label>
<select id="cidade"></select>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	// aqui vai nosso código javascript que está logo abaixo
</script>

</body>
</html>

Código javascript:


	$(document).ready(function()
	{
		// caminho do nosso cfc
		var ajaxService = "ajax.cfc?returnformat=JSON&queryformat=column&";
		
		// evento quando trocar estado
		$("#estado").change(function(){ 
			
			//aqui definimos os parâmetros a serem enviados para o cfc
			var parametros = { estado: $("#estado").val() };

			// função ajax do jquery para carregar as cidades	
			$.ajax({
				type: "GET",
				url: ajaxService + "method=getCidades",
				dataType: "json",
				data: parametros,
				success: function( query ) {
					var cidade = $("#cidade");
					var htmlOpcoes = [];

					// limpamos todas as options da cidade (no caso de trocar o estado)
					cidade.empty();
					
					//aqui fazemos um loop pelas cidades retornadas e adicionamos no select correspondente
					for ( var i = 0; i < query.ROWCOUNT; i++) {
						htmlOpcoes[i] = '<option value="' + query.DATA.codigo[i] + '">' + query.DATA.nome[i] + '</option>';
					}
					cidade.append( htmlOpcoes.join('') );
				}
			});
		});
	});

Por fim vamos criar nosso arquivo ajax.cfc responsável pelo backend:


<cfcomponent displayname="ajax">

	<cffunction name="getCidades" access="remote" output="false" returntype="query" returnFormat="json">
		<cfargument name="estado" type="numeric" required="true" hint="Código do estado" />

		<cfset var q_Cidades = QueryNew("") />

		<cfquery name="q_Cidades" datasource="dsn">
			SELECT 
				codigo, nome 
			FROM 
				cidade 
			WHERE 
				estado = <cfqueryparam value="#arguments.estado#" cfsqltype="cf_sql_integer" />
		  </cfif>
		</cfquery>		

		<cfreturn q_Cidades />
  </cffunction>
  
</cfcomponent>

Note que as tags “access” está como “remote” e o “returnFormat” como “json”, isso é fundamental para o funcionamento do ajax.

Abraço.

Tagged with:  

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *