Die Aufgabenstellung
Die Überschrift hört sich möglicherweise nicht sehr praxisrelevant an. Wer will schon einen Datensatz unbedingt per Ajax/ jQuery in eine Datenbanktabelle mit MySQL und einem INSERT-Befehl eintragen? So fand ich einen Fragesteller im Internet, der anmerkte:
„Ich brauch mal etwas Nachhilfe zu Ajax. Ich findet zwar hunderte Beispiele dafür, wie ich Datensätze aus einer MySQL-Datenbank in meine Webseite einbinde, aber keinen einzigen Artikel, der mir erklärt, wie ich von meiner Webseite aus Daten zur Datenbank schicke und eintragen lasse…“
Dabei wurde vielleicht die „falsche“ Frage gestellt, oder das Anliegen ungünstig hervorgebracht? Was ist oben im Screenshot zu sehen? Richtig – ein Formular mit einem „Sende-Button“. An dieser Stelle sollte man eventuell nicht nach:
„Datensatz jQuery/Ajax in MySQL Tabelle eintragen“ suchen,
sondern sein Anliegen anders ausdrücken?
„Tutorial Formular mit AJAX in MySQL Datenbank speichern“
Die Aufgabe ist:
- Generiere eine Liste mit Ebay-Angeboten.
- Platziere hinter JEDEM Angebot verschiedene Formular-Felder und ein Submit-Button.
- Baue eine Funktion ein, welche die EINZELNEN Formular-Daten separat in der Datenbank speichert, ohne die Website neu laden zu müssen.
In einem Projekt benötige ich eine Funktion, die einzelne Datensätze in die Datenbank schreibt, ohne dass sich die Seite neu lädt.
Ajax oder jQuery?
Ajax ist die spartanische Lösung für Puristen, eine Handvoll Codezeilen erledigen den vergebenen Job. Doch Ajax erfordert eine aufwendigere Einarbeitung ist das Thema „asynchronen Datenübertragung zwischen Browser und Server“, erfordert etwas mehr Code und bietet demzufolge mehr Platz für Tipp- und Faselfehler.
jQuery ist die einfacherer Lösung, auch wenn eine riesige Programmbibliothek in die Website geladen werden muss. Doch wenn Du mit WordPress arbeitetest, hast du ohnehin jQuery auf deinem Server laufen. Jede zweite Website und 70 % der 10.000 meistbesuchten Webseiten nutzen jQuery (2018).
Die folgende Beschreibung bezieht sich auf jQuery.
Wo fange ich an?
Die Liste der gefundenen Ebay-Artikel liegt schon in meinem Browser, dieser Part ist erledigt.
jQuery einbinden und testen
Ich mach mir keine große Arbeit damit und lade die aktuelle jQuery-Version einfach über Google. Danach prüft ein kleiner Code, ob jQuery funktioniert. Ich habe ihn deshalb reingesetzt, weil immer etwas beim coden schiefgehen kann und es doch nicht an so etwas banalen wie eine fehlerhaft eingebundene Javascript-Bibliothek liegen soll.
<head>
<!-- Lädt jQuery bei Google herunter -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> <!-- Prüft, ob jQuery auch funktioniert, kann danach entfernt werden -->
$(document).ready(function(){
alert("jQuery funktioniert")
});
</script>
</head>Wenn Du folgende Meldung siehst, funktioniert das eingebundene jQuery und der Testcode kann wieder entfernt werden.
Formular anlegen – was soll jQuery speichern?
Ein Script crawlt eine Website, fischt die gewünschten Daten heraus, präsentiert sie in einer Liste auf dem Bildschirm. Wenn ich die verschiedenen Daten mit jQuery auf den Server übertragen möchte, muss ich Formular-Felder einrichten, welche mit ebendiesen Daten gefüllt werden.
- $Ang_name – Name des Angebot
- $Ang_preis – Preis des Angebot
- $Ang_ende – Ende des Angebot
Das Formular gestaltet sich wie ein ganz normales Formular.
<form name="MeinFormular" method="post" action = "senden_ajax_auktionen.php">
<input type="hidden" name="name" value="<?php echo $Ang_name;?>" >
<input type="hidden" name="preis" value="<?php echo $Ang_preis;?>" >
<input type="hidden" name="ende" value="<?php echo $Ang_ende;?>" >
<input type="submit" name="MeinSubmitButton" ><b>SPEICHERN</b>
</form>In Zeile 1 gibst Du Deinem Formular einen Namen, legst die Übertragungs-Methode POST fest und sendest die Daten an das Script in der Datei „senden_ajax_auktionen.php“.
Damit nicht überflüssigerweise hinter jedem Artikel die Formular-Felder zu sehen sind, versteckst Du sie mit dem Eintrag "type="hidden" .
Mit „Value“ übergibst du dem Input-Feld einen Wert (Artikel Namen, Artikel Preis, Artikel Angebotsende)
In Zeile 6 gibst Du Deinem Submit-Button einen Namen. Wenn Du später darauf klickst, fängt an jQuery zu rattern und schickt alle Daten an die Datei „senden_ajax_auktionen.php“ zur weiteren Verarbeitung.
jQuery Funktion schreiben und einbinden
Wir müssen jQuery sagen, was es mit welchen Daten tun soll.
<script>
jQuery(document).ready(function($) {
$('#MeinSubmitButton').on('click', function() {
var object = {};
// Formulareingaben in ein Array einfügen
var array = $('#MeinFormular').serializeArray();
// Machen Sie ein Objekt aus dem Array
$.each(array, function(index, item) {
object[item.name] = item.value;
});
$.ajax({
dataType: 'json', // Daten-Typ
contentType:'application/json;charset=UTF-8', // Content-Typ
data: JSON.stringify(object),
type: 'POST', // Daten werden mit POST-Methode versendet
url: 'senden_ajax_auktionen.php' // Sende Daten an diese Datei
}).done(function(data, textStatus, jqXHR) {
console.log('Daten gesendet.'); // Daten wurden gesendet
}).fail(function(jqXHR,textStatus,errorThrown){
console.log('Es gab einen Fehler.'); // Fehler ist aufgeteten
});
return false; // Klick auf Submit-Button lösst keine Weiterleitung aus
});
});PHP-Zielscript schreiben
Die jQuery Funktion sendet die im Formular (id=“MeinFormular“) enthaltenen Daten per POST an die Datei „senden_ajax_auktionen.php“.
In dieser Datei werden die per Post übergebenen Daten aus der Variable $_POST gelesen und in die Tabelle deiner MySQL-Datenbank gespeichert.
Eventuell Testfunktion zur Fehlersuche einbauen
Was machst Du, wenn sich nichts zuckt und bewegt? Wenn etwas in der Zieldatei nichts funktioniert, bekommst Du kein Feedback? Dafür gibt es eine Lösung.
In dem Ziel-Script, das die jQuery Daten entgegennimmt, verarbeitet und in die Datenbank einträgt, trägst Du Folgendes ein (dort, wo es nötig ist):
$Fehlermeldung = "In Funktion funktioniert folgendes nicht ..." print_r(json_encode($Fehlermeldung));
Ist „json_encode“ eine jQuery-Sache?
https://www.gutefrage.net/frage/textfeld-in-mysql-datenbank-ohne-reload
https://www.gutefrage.net/frage/textfeld-in-mysql-datenbank-ohne-reload
AX Dokumentation Vorsicht: Wenn als DataType beispielsweise JSON eingestellt ist, müssen die Daten vom Backend im JSON Format zurück kommen. Ansonsten geht der Response in den Error-Zweig und nicht in success
