codeJquery

Eine Ajax Abfrage mit jQuery

Daten per jQuery/Ajax/PHP in die DB eintragen und auslesen, ohne die Seite neu laden zu müssen ist soo einfach. Hier ein kleines Einsteiger Tutorial, bei dem Formular Informationen einer HTML Seite in Hintergrund in eine DB eingetragen werden, ohne die Seite neuladen zu müssen.

Erst einmal brauchen wir natürlich jquery.

und natürlich irgendeine Information, die wir in die DB schreiben wollen. Hierfür nehme ich einfach mal ein Formularfeld.

jetzt lassen wir jQuery schauen, ob sich dieses Feld ändert und senden daraufhin unsere Infos per ajax an eine PHP Datei.

Wir senden also per $_POST die beiden Variablen id und value an updatedb.php.
Natürlich brauchen wir noch eine DB Tabelle mit zwei Feldern id und value. Alles was unsere updatedb.php nun machen muss ist: Eine DB Verbindung herstellen und per mysql_query die Daten eintragen.

$result = mysql_query("UPDATE `liste` SET `value`='".$_POST['value']."' WHERE `id`= '".$_POST['id']."'" );
if (!$result) { $debug = mysql_error(); }

Wenn wir jetzt noch Daten wieder zurück an das HTML Dokument senden wollen, dann geht das einfach per echo „Das hier ist die Rückgabe von PHP an jQuery“;
Um jedoch Variablen „ordentlich“ zu übergeben gibt es json.
Damit sieht eine Rückgabe im PHP Script etwa so aus:

echo json_encode( array( "rueckgabe"=>$rueckgabe , "debug"=>$debug) );

Und nun wieder zurück zu unserem Ajax Aufruf. Da wir für die Datenübermittlung eh den $_POST Weg nehmen gibt es auch die jquery Kurzschreibweise $.post
Außerdem müssen wir unser json in jQuery wieder parsen, damit wir auf die einzelnen Variablen zugreifen können.

$(".textfeld").change(function() {

$.post( "updatedb.php", { 'id': this.id, 'value': $(this).val() }, function(response) {
	var json = $.parseJSON(response);
	//Rückgabewerte debug und rueckgabe wie in der PHP Datei encoded
	console.log("debug:"+json.debug +"rueckgabe:"+json.rueckgabe);
});

});

>> Download >>

So wird nun also bei jeder Änderung des Textfeldes im Hintergrund die DB aktualisiert.
Schon schön, aber so richtig erkennen tut man den Vorteil der Hintergrund-Aktivitäten noch nicht.
Das kann man Ändern; hier geht es weiter zu einem Beispiel das es deutlicher machen sollte.