Daten aus MySQL-Datenbank ohne reload laden

Heute habe ich ein kleines Beispiel für euch, wie man nach dem Absenden eines Formulars ohne Neuladen der Seite Daten aus einer MySQL-Datenbank abrufen und das Ergebnis entsprechend ausgeben kann.

In Diesem Beispiel habe ich ein Formular mit einem Eingabefeld, in das man den Usernamen eines Users eingibt. Nachdem man das Formular abgeschickt hat, erhält man als Ergebnis den Vornamen dieser Person. Hat diese Person keinen Vornamen im Userbereich eingegeben dann wird dies genauso angezeigt wie wenn es keinen User mit dem entsprechenden Usernamen gibt.

Wie benötigen zu allererst einmal eine MySQL-Datenbanktabelle.
In diesem Beispiel wollen wir auf den Vornamen eines Users zugreifen der in der Datenbanktabelle user steht.
Wenn also noch nicht vorhanden, legen wir eine neue Tabelle mit dem Namen user an und legen folgende Felder an.

Datenbanktabelle user

id - BigInt 11 - AutoIncrement
username - Varchar(30)
Nachname - Varchar(30)
Vorname - Varchar(30)
eMail - Varchar(120)

Anschließend können Sie gleich ein paar fiktive User eintragen damit wir unser Script auch testen können.

Nun brauchen wir ein Script mit dem wir uns zu unserer Datenbanktabelle verbinden können.
Dieses habe ich db.inc.php genannt und in das Unterverzeichnis includes ausgelagert.
Die Angaben für Server, Datenbankname, Username und Passwort, die für die Verbindungsaufnahme zur Datenbank erforderlich sind, müssen Sie natürlich noch abändern.

 

includes/db.inc.php

<?php
$dbserver = "MySQLServer"; //Datenbankserveradresse
$dbname   = "MySQLDBname"; //Name der Datenbank
$dbuser   = "MySQLUsername"; //Username
$dbpass   = "MySQLPasswort"; //Passwort

$conn = mysql_connect($dbserver, $dbuser, $dbpass);
if(is_resource($conn))
{
  mysql_select_db($dbname, $conn);
  mysql_query("SET NAMES 'latin1_german1_ci'", $conn);
}
?>

 

Die Datei index.php ist die Seite die wir ganz normal über den Browser aufrufen.
Sie enthält das Formular zur Eingabe des Usernamen und auf ihr wird uns auch das Ergebnis unserer Datenbankabfrage ausgegeben.

Und so funktioniert es.
Nachdem Sie den Usernamen eingegeben und das Formular abgeschickt haben, wird die Funktion sendRequest aufgerufen.
Diese Funktion übergibt den eingegebenen Usernamen mit der Methode Post an die Datei test.php. Die Datei test.php startet nun eine Datenbankabfrage prüft ob der username überhaupt in der Datenbank steht. Ist dies der Fall, dann wird der Vorname des Users ausgelesen, sofern der user einen Vornamen eingegeben hat.  Nun wird je nach Status der Abfrage ein String zusammengestellt der per echo an die Funktion sendRequest zurückgegeben wird. Sobald die Abfrage abgeschlossen wurde, wird die Funktion showResponse aufgerufen die uns schließlich das Ergebnis der Datenbankabfrage ausgibt.

index.php
Die Datei index.php enthält ein Formular mit einem Eingabefeld, in das der Username eingegeben wird, von dem wir den Vornamen erfahren wollen.
Das Ergebnis der Abfrage, das durch die Datei test.php generiert wird, wird unter dem Formular ausgegeben.

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="scripts/ajax/prototype.js"></script>
    <script>
      function sendRequest()
      {
        new Ajax.Request("test.php",
        {
          method: 'post',
          postBody: 'username='+ $F('username'),
          onComplete: showResponse
        });
      }

      function showResponse(req)
      {
        $('show').innerHTML= req.responseText;
        $('show').style.paddingTop = "10px";
      }
    </script>
  </head>

<body>

<form id="test" onSubmit="return false;">
  <input type="text" name="username" id="username" >
  <input type="submit" value="submit" onClick="sendRequest()">
</form>

<div id="show"></div>

</body>
</html>

 

test.php
Diese Datei wird durch das Script sendRequest aufgerufen.
Es ließt den Vornamen des gesuchten Users aus der Datenbank aus und übergibt diesen an sendRequest zurück.

<?php
if(isset($_POST["username"]) && $_POST['username'] == "") echo "username is empty";
else
{
  require_once("includes/db.inc.php");
  $q_data = mysql_query("SELECT vorname FROM user WHERE username = '".mysql_real_escape_string($_POST['username'])."'", $conn) or die(mysql_error());
  $n_data = mysql_num_rows($q_data);
  if($n_data > 0)
  {
    $r_data = mysql_fetch_array($q_data);
    $r_data['vorname'] = trim($r_data['vorname']);

    if(!empty($r_data['vorname']))
    {
      $vorname = "heißt <b>".$r_data['vorname']."</b>";
    }
    else
    {
      $vorname = 'will seinen Namen nicht nennen!';
    }
    echo "Der User mit dem Usernamen: <b>".$_POST['username']."</b> ".$vorname;
  }
  else
  {
    echo "Es gibt keinen User mit diesem Usernamen!";
  }
}
?>

Die aktuellste Version der Datei prototype.js, die Sie für dieses Beispiel benötigen, finden Sie unter folgendem Link.

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

3 Kommentare zu “Daten aus MySQL-Datenbank ohne reload laden

  1. Hallo Enrico,

    vielen Dank für das Beispiel, ich finde es sehr hilfreich. Eine Frage habe ich aber dazu:

    Wie ist es möglich bei PostBody mehrere Input-Feld-Inhalte zu übertragen? D. h. wie müssen diese hintereinander angegeben werden?

    Ich hatte es versucht mit:

    postBody: ‚username=’+ $F(‚username‘)+’prename=’+$F(‚prename‘),

    das hat aber leider nicht funktioniert. Der Browser gibt dann:

    TypeError: null is not an object (evaluating ‚element.tagName‘)

    in prototype.js aus.

    Viele Grüße,

    Dominik

    • Hier werden Variablen durch ein & getrennt.
      Versuchs mal in der Art

      postBody: ‚username=’+ $F(‚username‘)+’&prename=’+$F(‚prename‘),

    • Vielen Dank. Ich habe meinen Fehler gefunden. Ich hatte mich im Variablennamen verschrieben.