Ajax, ein Request und 2 Antworten
Montag, 27 Juli 2009
1 Request - 2 Antworten. Klingt wunderbar, ist aber genauer betrachtet nicht ganz richtig. Tatsächlich sind auch mehr Antworten möglich. Was brauchen wir? Ein Formularfeld für Benutzereingaben, ein kleines jQuery-Script zum Überwachen des Formularfelds und absetzen des Ajax-Requests und ein PHP-Script, das mehrere Antworten liefert.
Im Artikel das Triple: jQuery, PHP und eine MySQL-Datenbank wurde in ein Formularfeld eine Vorwahl bzw. ein Teil einer Vorwahl eingegeben. Diese wiederum an ein PHP-Script gegeben und eine Datenbank abgefragt. Das Ergebnis bestand aus zur Vorwahl passenden Orten. In der Demo dazu, ganz am Ende des Artikels, wurde die Ausgabe-Box abhängig von der Anzahl der gefundenen Orte dynamisch in ihrer Höhe verändert. Das Script hat nämlich nicht nur die Orte über jQuery an die Webseite übermittelt, sondern noch eine weitere Antwort: die Anzahl gefundener Orte.
Das Prinzip ist einfach. Das was PHP ermittelt setzen wir in einen String - aber mit Trennzeichen. Ist das Ergebnis der Vorwahl (um beim Beispiel zu bleiben) ein Ort, gibt PHP folgendes zurück:
<?php
// Zuvor ermittelt
$anzahl=1;
$ort='Hintertupfingen';
$trennzeichen='***';
echo $anzahl.$trennzeichen.$ort;
?>
Wir müssen also nur in Kenntnis des Trennzeichens das Ergebnis des Ajax-Requests auseinandernehmen. Die beiden (oder mehr) gesplitteten Teile sind die Antworten auf einen Request. Die get() Funktion liefert das Ergebnis des PHP-Scriptes script.php an eine Funktion. Das Ergebnis steht in text. Dies wird mit split(), genauer mit text.split("***") aufgeteilt. splity ist dabei ein Array mit den aufgetrennten Teilen.
<script type="text/javascript">
$(document).ready(function(){
$.get("script.php", function(text){
var splity = text.split("***");
var anzahl= splity[0];
var ort=splity[1];
});
});
</script>
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.