cfJSON und jQuery

Thierry Nischelwitzer, Webapplikations-Programmierer (bis 2012)

Da wir teilweise noch ColdFusion 6.1 einsetzen und diese Version noch nicht von Haus aus JSON unterstützt, musste ich auf cfJSON ausweichen. Die frei verfügbare Komponente dient wunderbar um Objekte, Querys oder ähnliches zu serialisieren und in einer anderen Programmiersprache wieder zu deserialsieren. In meinem Fall brauche ich es, um Daten in JavaScript wieder weiter verarbeiten zu können.

Ich will konkret eine ähnliche Funktion wie bei der Google-Suche haben: ich gebe etwas in ein Textfeld ein und beim Tippen erscheint eine Liste mit möglichen Treffern. Wenn ich einen Treffer auswähle, soll mir JavaScript wieder ein AJAX-Request machen und die kompletten Daten des Datensatzes auslesen und zwar im JSON-Format. Dazu brauche ich folgendes HTML-Gerüst.

1<input type="text" name="suche" id="suche" value="" />
2<div id="suggest">&nbsp;</div>
3<div id="ausfuellen">&nbsp;</div>

Damit er die Liste mit Resultaten bei jedem Tastendruck abruft braucht es folgenden Code inkl. jQuery.

1<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
2<script type="text/javascript">
3 // Funktion ausführen wenn das Dokument geladen ist
4 $(document).ready(function (){
5 // Wenn beim Feld mit der ID 'suche' eine Taste gedr&auml;ckt wird wird der Ajax-Request ausgelöst
6 $("#suche").keyup(function (){
7 // Ajax-Request auslösen
8 $.ajax({
9 type: "GET", // Methode GET
10 url: "ajax.cfm", // Datei ajax.cfm
11 data: "suche=" + $(this).val(), // URL-Parameter suche mit dem Wert des Feldes
12 success: function(msg){ // Funktion wenn der Request erfolgreich war
13            // Response in den DIV 'suggest' reinschreiben
14            $("#suggest").html(msg);
15
16 // Erweiterung kommt unten
17
18          } // close success function
19 }); // close ajax
20 }); // close keyup
21 }); // close ready
22</script>

Zurückgeliefert kriegt man in etwa diesen Code. Da muss man einfach noch die Datenbank abfragen und aus diesen Daten das UL-LI Menü generieren oder was man auch immer gerne machen würde.

ajax.cfm

1<ul>
2 <li rel="1">
3 Erster Eintrag
4 </li>
5 <li rel="2">
6 Zweiter Eintrag
7 </li>
8</ul>

Wie man sieht, habe ich noch den Parameter rel hinzugefügt, damit kann ich am Schluss die ID des Eintrages auslesen. Folgenden JavaScript-Code muss im oberen JavaScript-Code unter // Erweiterung kommt unten eingefügt werden.

1// Beim klicken auf ein Element
2$("#suggest li").click(function(){
3 // AJAX-JSON-Request abfeuern
4 $.getJSON(
5 "json.cfm?id=" + $(this).attr("rel"), // URL mit Parameter aus der Liste (Attribut 'rel')
6 function(data){
7    // Wenn die Daten angekommen sind in das DIV schreiben
8 $("#ausfuellen").html(data.data.name[0]);
9     // Je nachdem wie die Daten kommen anders benennen.
10     // data.recordcount wäre beispielsweise den RecordCount des Querys
11 } // close function for data
12 ); // close getJSON
13}); // close click

So, der Coldfusion-Code muss natürlich auch noch her. Der generiert ein Query und liefert mit der cfJSON-Komponente ein JSON-Element zurück.

json.cfm

1<!--- Query mit Daten erstellen --->
2<cfset dataQuery = queryNew('id,name') />
3
4<cfset queryAddRow(dataQuery, 1) />
5<cfset querySetCell(dataQuery, 'id', '1') />
6<cfset querySetCell(dataQuery, 'name', 'Test1') />
7
8<cfset queryAddRow(dataQuery, 1) />
9<cfset querySetCell(dataQuery, 'id', '2') />
10<cfset querySetCell(dataQuery, 'name', 'Test2') />
11
12<!--- Gewünschtes Resultat laden --->
13<cfquery name="resultQuery" dbtype="query">
14 SELECT *
15 FROM dataQuery
16 WHERE id = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#" />
17</cfquery>
18
19<!--- cfJSON laden --->
20<cfset objJSON = createObject('component','json') />
21
22<!--- Query Codieren in JSON --->
23<cfoutput>#objJSON.encode(resultQuery)#</cfoutput>

So ist es ganz einfach, JSON-Objekte in ColdFusion zu generieren und mit jQuery wieder weiter zu verarbeiten.