Mit Ajax einen Datenbank Eintrag machen

MarvinTLA · 7. August 2021

Moin,

hab da ein kleines Problem. Ich möchte mittels Ajax einen Datenbank Eintrag machen. Leider macht er das nicht, so wie ich das gerne hätte.
Hat jemand eventuell eine Idee?

Hier einmal der Button zum Absenden:

Code

<form method="post">
<div class="form-group form-float">
<div class="form-line">
<input type="text" name="nachname" id="nachname" style="width: 30%;" class="nachname" autocomplete="off" placeholder="Nachname">
</div>
</div>
<button style="width: 50%" class="createUser form-control btn btn-raised btn-primary btn-block btn-xs waves-effect">Benutzerkonto erstellen</button>
</form>

Alles anzeigen

Hier einmal die Ajax:

Code

<script>
$(document).ready(function() {
$(".createUser").click(function() {
var nachname = $('#nachname').val();
var vorname = $('#vorname').val();
if (nachname!="" && vorname!="") {
$.ajax({
type: "POST",
url: "createUser.php",
data: {
nachname: nachname,
vorname: vorname},
},
success: function(data) {
alert("Erfolg!");
});
} else {
alert("Fehler!");
}
});
});
</script>

Alles anzeigen

Und die createUser.php

PHP

<?php
include('basics.php');
$nachname = $_POST['nachname'];
$vorname = $_POST['vorname'];
try {
$stmt = $dbv->prepare("INSERT INTO benutzer(nachname, vorname) VALUES (:nachname, :vorname)");
$result = $stmt->execute(
array(
":nachname" => $nachname,
":vorname" => $vorname
)
);
} catch(EXCEPTION $w) {
echo "Ein Fehler ist aufgetreten: " . $w->getMessage();
exit();
}
?>

Alles anzeigen

Also er macht überhaupt keinen Eintrag und zeigt mir auch keine alerts auch nicht wenn ein Feld leer ist.

Hat jemand eine Idee?
Wäre sehr dankbar

~ Marvin

jonas3344 · 8. August 2021

Hast du mal in die Konsole der Entwicklertools geschaut ob ein JavaScript-Fehler vorliegt?

Hast du geprüft ob der Click-Handler funktioniert (z.b. ein einfaches Alert)?

Hast du in den Entwicklertools geschaut ob ein Request abgeschickt wird?

Hast du im PHP-Script mit einer Debugausgabe geschaut ob die Werte ankommen?

Hast du in den PHP-Errorlog geschaut?

Was mir auffällt:

- Das <form>-Element ist an sich unnötig.

- Dein <button> braucht ein type="button". Default ist submit, was die Seite gleich mal abschickt.

- Der Click-Handler für den Button muss nicht in die document.ready-Funktion.

- Im PHP-Teil ist das umkopieren von $_POST in eine Variable absolut unnötig. POST ist superglobal, du kannst das im ganzen Script benutzen.

MarvinTLA · 8. August 2021

Also, ich habe einen Fehler gesehen. Habe einige klammern vertauscht. Nun klappt zumindest das Eintragen in die Datenbank. Auch das "alert" wenn einige Felder leer sind, wird angezeigt. Nur wird das "alert" bei "success" nicht angezeigt.

Fehler werden keine angezeigt.

jonas3344 · 8. August 2021

Hast du die Punkte in meinem Beitrag behoben? Vor allem den Zweiten?

In den Entwicklertools siehst du was Dein Request zurückgibt. Wenn der Status nicht 200 ist springt er nicht in den Success-Teil.

MarvinTLA · 8. August 2021

Ja hab deine Fehler behoben.
Wo genau soll ich den Status in den Entwicklertools den sehen? Weil mir wird nirgends was angezeigt.

jonas3344 · 8. August 2021

Du solltest Dich mit den Dev-Tools Deines Browsers bekannt machen. Gerade wenn du mit AJAX-Requests programmieren willst, ist das ensentiell.

Ich weiss nicht was du für einen Browser verwendest aber unter Netzwerk oder Network sieht man das recht schnell.

MarvinTLA · 8. August 2021

Also er springt in den success Teil.

Er zeigt den Status 200 an.

jonas3344 · 8. August 2021

In dem Fall Problem gelöst?

MarvinTLA · 8. August 2021

naja, nicht wirklich.

Weil das alert im Suchen Teil trotzdem nicht ausgeführt wird.

Mit "er springt in den success Teil" meinte ich nur, dass er den Status 200 angezeigt.

Wo du meintest, das er nur in den success Teil springt, wenn er Status 200 anzeigt.

jonas3344 · 8. August 2021

Jo. Ist halt so schwer beantwortbar was du falsch machst.

MarvinTLA · 8. August 2021

wüsste ich auch gerne.

Sempervivum · 9. August 2021

$.ajax hat auch einen error-Callback, siehe hier:

https://api.jquery.com/jquery.ajax/

Versuche, ob der aufgerufen wird. Die Parameter könnten dir dann Hinweise geben.

basti1012 · 9. August 2021

Hast du es jetzt hinbekommen ?

Falls nicht änder dein Script mal so

JavaScript

$.ajax({
type: "POST",
url: "createUser.php",
data: {
nachname: nachname,
vorname: vorname
},
success: function(data) {
alert("Erfolg!");
}
});

Alles anzeigen

Wenn du wirklich in der Konsole geschaut hast , dann hast du das wohl übersehen.

In der Konsole steht da

Uncaught SyntaxError: missing ) after argument list

Die Zeile könnte für Neulinge etwas verwirrend sein, weil eigentlich kein ) fehlt.

Hättest du uns den Fehler mitgeteilt , hätte man dir schneller helfen können.

Da wo der Fehle erkannt wurde, fehlte theoretisch schon eine Klammer, aber die Konsole wusste da ja noch nicht das ein success kommt und deswegen die Klammer erst später kommt.

In Zukunft immer die Fehler posten , gerade wenn dich danach einer Fragt

MarvinTLA · 9. August 2021

Danke für den Hinweis basti1012 habe den Fehler selber natürlich gesehen. Aber habe den selber behoben und trotzdem war das nicht die Lösung. Daher habe ich den Fehler nicht mehr mit reingeschrieben.

Wie gesagt. Beim Success passiert leider nichts. Der Status 200 wird angegeben. Und es wird kein weiterer Fehler mit angezeigt. Er erstellt auch auf jeden fall den Datenbank Eintrag. Wie gesagt, nur das das er beim Success keinen Alert ausgibt, ist aktuell der Fehler.

basti1012 · 9. August 2021

Poste mal dein Javascript Code.

Ich habe ja gelesen das du die klammern behoben hast.

Da aber der Eintrag geht , aber der success nicht ,habe ich mal ausprobiert wie das überhaupt gehen soll.

Man kann die klammern so falsch setzen, dass es sogar geht, so dass die Konsole kein Fehler anzeigt.

Das würde dann so aussehen

Code

$.ajax({
type: "POST",
url: "createUser.php",
data: {
score: nachname,
username: vorname,
success: function(data) {
alert("Erfolg!");
}
}
});

Alles anzeigen

Das sendet, aber es kommt kein success. Schon interessant.

Bist du sicher das deine Klammern so sind wie ich in #13 geschrieben habe ?

Zeig mal dein JS code wie du ihn jetzt hast.

ggf. das PHP Script auch nochmal, obwohl ich da nichts finde, was den success in JS blocken könnte.

Anstatt den alert alert("Erfolg!"); könntest du da console.log(data) reinschreiben, ist beim debuggen besser

Sempervivum · 9. August 2021

MarvinTLA Meinen Hinweis aus #12 schon umgesetzt?

MarvinTLA · 10. August 2021

basti1012 schrieb:

Poste mal dein Javascript Code.
Ich habe ja gelesen das du die klammern behoben hast.
Da aber der Eintrag geht , aber der success nicht ,habe ich mal ausprobiert wie das überhaupt gehen soll.
Man kann die klammern so falsch setzen, dass es sogar geht, so dass die Konsole kein Fehler anzeigt.
Das würde dann so aussehen

Code

$.ajax({

type: "POST",

url: "createUser.php",

data: {

score: nachname,

username: vorname,

success: function(data) {

alert("Erfolg!");

}

}

});

Alles anzeigen

Das sendet, aber es kommt kein success. Schon interessant.
Bist du sicher das deine Klammern so sind wie ich in #13 geschrieben habe ?
Zeig mal dein JS code wie du ihn jetzt hast.
ggf. das PHP Script auch nochmal, obwohl ich da nichts finde, was den success in JS blocken könnte.

Anstatt den alert alert("Erfolg!"); könntest du da console.log(data) reinschreiben, ist beim debuggen besser

Alles anzeigen

Hab auch das mit console.log mal getestet. Aber dort passiert auch nichts.

//Edit hab das ganze noch in einem anderen Browser gemacht:

Code

jquery.3.2.1.min.js:4 POST http://xxx.xxx.xxx.xx/includes/createUser.php 500 (Internal Server Error)
send @ jquery.3.2.1.min.js:4
ajax @ jquery.3.2.1.min.js:4
(anonymous) @ admin.php:196
dispatch @ jquery.3.2.1.min.js:3
q.handle @ jquery.3.2.1.min.js:3
jquery.3.2.1.min.js:4 XHR failed loading: POST "http://xxx.xxx.xxx.xx/includes/createUser.php".
send @ jquery.3.2.1.min.js:4
ajax @ jquery.3.2.1.min.js:4
(anonymous) @ admin.php:196
dispatch @ jquery.3.2.1.min.js:3
q.handle @ jquery.3.2.1.min.js:3

Alles anzeigen

Mein JS Code:

Code

<script>
$(".createUser").click(function() {
var nachname = $('#nachname').val();
var vorname = $('#vorname').val();
if (nachname!="" && vorname!="") {
$.ajax({
type: "POST",
url: "includes/createUser.php",
data: {
nachname: nachname,
vorname: vorname},
success: function(data) {
alert("Erfolg");
}
});
} else {
alert("Fehler!");
}
});
</script>

Alles anzeigen

PHP

Code

$nachname = filter_var(ucfirst($_POST['nachname']), FILTER_SANITIZE_STRING);
$vorname = filter_var(ucfirst($_POST['vorname']), FILTER_SANITIZE_STRING);
try {
$stmt = $dbv->prepare("INSERT INTO benutzer(nachname, vorname) VALUES (:nachname, :vorname)");
$result = $stmt->execute(
array(
":nachname" => $nachname,
":vorname" => $vorname
)
);
} catch(EXCEPTION $w) {
echo "Ein Fehler ist aufgetreten: " . $w->getMessage();
exit();
?>

Alles anzeigen

Sempervivum schrieb:

MarvinTLA Meinen Hinweis aus #12 schon umgesetzt?

Hatte ich gestern noch vor. Bin aber gestern nicht mehr dazu gekommen.

jonas3344 · 10. August 2021

Doch kein 200-er Status.

Schau in den error-log Deines Servers.

basti1012 · 10. August 2021

MarvinTLA schrieb:

Code

jquery.3.2.1.min.js:4 POST http://xxx.xxx.xxx.xx/includes/createUser.php 500 (Internal Server Error)

jquery.3.2.1.min.js:4 XHR failed loading: POST "http://xxx.xxx.xxx.xx/includes/createUser.php".

Was soll das den jetzt heißen?

Hattest du nicht gesagt das die Einträge in der DB geschrieben wurden?

Kommt mir jetzt etwas komisch vor?

Du mußt uns schon die richtigen Infos geben ,sonst kann man dir nicht richtig helfen.

Einmal ein 500 Error

Und einmal ein failed loading.

Hast du mal in der Konsole geschaut was das createUser.php zurückgibt?

Dein JS Code funktioniert bei mir ohne Probleme.

Versuch mal das was Sempervivum in 12 schrieb.

Ich weiß zwar nicht, ob das wirklich helfen soll, aber sempervivum kennt sich in den Sachen besser aus.

MarvinTLA · 10. August 2021

Sorry. War mein Fehler. Konsolenfehler ist wieder weg.
Habe ganz einfach oben im Code eine "Geschweifte - Klammer" vergessen. Nach dem catch Teil am Ende. (Die ist mir aber beim Einrücken des Codes verloren gegangen)

Und als kleine Info. Es klappt jetzt alles. Fragt mich nicht wieso, oder was ich gemacht habe. Ich habe nur den Text 1x anstatt des Alert den "console.log" Teil eingefügt und es am ende wieder Rückgängig gemacht und sonst nur nochmal zum Testen den <form> Teil entfernt.

Das mit dem <form> Teil entfernen habe ich allerdings schonmal gemacht und es ging trotzdem nicht. Vielleicht irgendetwas geändert wo ich nicht besonders drauf geachtet habe.

So um es jetzt einheitlich zu machen.

1. Wie gesagt. Der 500 Error kam durch eine Nicht vorhandene Klammer.

2. Ich habe letztens das <form> weggemacht und es ging nichts mehr.

3. Ich habe heute noch einmal <form> weggemacht und es ging.

Das Thema ist damit für mich beendet. Ich bin nur Froh das es klappt und bedanke mich bei JEDEM der mir geholfen hat und verschiedene Lösungsanschläge vorgeschlagen hat.