Einfach dynamisch

Teil 4: Tipps & Tricks für Ajax

28.4.2009 von Redaktion pcmagazin und Andreas Hitzig

ca. 2:00 Min
Ratgeber
  1. Tipps & Tricks für Ajax
  2. Teil 2: Tipps & Tricks für Ajax
  3. Teil 3: Tipps & Tricks für Ajax
  4. Teil 4: Tipps & Tricks für Ajax
  5. Teil 5: Tipps & Tricks für Ajax
  6. Teil 6: Tipps & Tricks für Ajax
  7. Teil 7: Tipps & Tricks für Ajax
  8. Teil 8: Tipps & Tricks für Ajax

Ist dies der Fall, wird im nächsten Schritt eine Verbindung zur Datenbank mithilfe des Befehls mysql_select_db("Datenbankname", $connection); aufgebaut. Anschließend wird die SQL-Abfrage definiert und der Variablen $erg zugewiesen.

while($row = mysql_fetch_array
($erg)) {
echo "<tr>";
echo "<td>" . $row['Vorname'] .
"</td>";
echo "<td>" . $row['Nachname'] .
"</td>";
echo "<td>" . $row['Spielernr'] .
"</td>";
echo "<td>" . $row['Position'] .
"</td>";
echo "<td>" . $row['Saison'] .
"</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($connection);

Der Rest ist lediglich optische Aufbereitung: Zur Darstellung wird eine Tabelle gewählt und darin werden alle Datensätze der Ergebnismenge geschrieben. Dabei wird die Ergebnismenge Zeile für Zeile durchgegangen und die jeweiligen Felder ausgegeben. Abschließend wird die Verbindung zur Datenbank wieder geschlossen.

Dynamische Spielerermittlung

In einem weiteren Beispiel zeigen wir Ihnen, wie Sie Inhalte - beispielsweise für Drop-Down-Boxen - dynamisch und kontextbezogen generieren können. Sie können die Inhalte entweder direkt aus einer Datenbank ziehen oder wie im Beispiel aus einem Array.

Ajax: Tipps & Tricks
Das CSS-Dock erlaubt mit wenig Coding eine optisch ansprechende Navigation.
© Archiv

Für dieses Beispiel wird zur Vereinfachung das kostenlose Simple Ajax Code-Kit (SACK) von Twilight Universe verwendet ().

Die HTML Seite besitzt zwei Drop-Down-Felder: Das erste ist statisch und enthält die vier verschiedenen Positionen in einer Fußballmannschaft: Torwart, Abwehrspieler, Mittelfeld und Angriff. Die zweite Drop-Down-Box ist aktuell noch leer, wird jedoch abhängig von der Auswahl der Spielposition mit den Namen der Spieler aus dem aktuellen FC Bayern München Kader geladen.

<form action="" method="post"><table><tr><td>Position: </td><td><select id="fcb_pos" name=
"fcb_pos" onchange="getSpieler(this)"><option value="">Wählen Sie eine
Position</option><option value="tw">Torwart</option><option value="ab">Abwehr</option><option value="mf">Mittelfeld</option><option value="ag">Angriff</option></select></td></tr><tr><td>Spieler: </td><td><select id="fcb_spieler" name=
"fcb_spieler"></select></td></tr></table></form>

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Cover Internet Magazin 6/2010

Praxis-Knowhow für Web-Profis

Inhaltsverzeichnis Internet Magazin 6/2010

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: Wordpress als CMS einsetzen: Stabil, ausgereift,…

Inhaltsverzeichnis Internet Magazin 7/2010

Praxis-Knowhow für Web-Profis

Inhaltsverzeichnis Internet Magazin 7/2010

Ab dem 14. Mail finden Sie die neue Ausgabe des Internet Magazins mit folgenden Themen am Kiosk: HTML5 & CSS3 schon jetzt: Alle neuen Features ohne…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Mobile Webseiten erstellen mit jQuery Mobile

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Listen, Buttons und Co. mit jQuery Mobile

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…

Mobile Webseiten mit jQuery Mobile

Design für Smartphones

Seitengestaltung und Event-Steuerung mit jQuery Mobile

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…